Quick links

Api
Api keys	Add
Api logs

Authentication and Authorization
Groups	Add
Users	Add

Celery Results
Group results	Add
Task results	Add

Clients
Lowe's Associates	Add

Common
Audio debug logs	Add
Audio files	Add
Call summary configs	Add
Call summary datas	Add
Call tag configs	Add
Call tag notification configs	Add
Call tag results
Config settingss	Add
Deepgram debug logs	Add
Filter presets	Add
Filterable Filter Configurations	Add
Filterable Items	Add
Notification triggers	Add
Notifications	Add
Prompt templates	Add
Slack notification logs	Add
Speed tests	Add
Transcript keywords	Add
Transcripts	Add
Voice Options	Add

Integration
Pages	Add
Providers	Add
Question historys	Add

Interview Management
Candidates	Add
Interview Categories	Add
Interview notes	Add
Interview steps	Add
Interviews	Add

Knowledge
Document Tags	Add
Document Versions	Add
Documents	Add

Live_Assist
Ask reddy annotations	Add
Ask reddy calls	Add
Transcript Feedbacks

Lms
Courses	Add
Lesson completions	Add
Lesson user time spents	Add
Lessons	Add
Modules	Add

Mainapp
Access tokens	Add
Audio file caches	Add
Auto generation statuss	Add
Call recordings	Add
Chat with transcript messages	Add
Chat with transcript sessions	Add
Company access requests	Add
Company prompt sets	Add
Companys	Add
Custom fields	Add
Embedding faqs	Add
End user products	Add
Export jobs
Faq results	Add
Feedbacks	Add
Gpt metrics	Add
Grade curves	Add
Grades	Add
Live conversation transcripts	Add
Live conversations	Add
Live ingestion controlss	Add
Live sim sessions	Add
Live sim states	Add
Objection scenarios	Add
Objections	Add
Outline sections	Add
Prompt historys	Add
Qa results	Add
Rag chats	Add
Reddy profiles	Add
Script trainings	Add
Suggested prompts	Add

Monitoring
Agent metrics	Add
Event durations	Add
Event metrics	Add

Periodic Tasks
Clocked	Add
Crontabs	Add
Intervals	Add
Periodic tasks	Add
Solar events	Add

Qa
Auto qa configs	Add
Benchmarks	Add
Condition nodes	Add
Data points	Add
External qa items	Add
Feedback messages	Add
Feedback threads	Add
Graph qas	Add
Internal qa items	Add
Live external qa item scores	Add
Live qa item scores	Add
Output nodes	Add
Pop up nodes	Add
Ports	Add
Progresss	Add
Qa automations	Add
Qa embeddings	Add
Qa relation snapshots	Add
Qa run iterations	Add
Qa runs	Add
Qa scoring instructions	Add
Report flags	Add
Training external qa item scores	Add
Training qa item scores	Add
Trigger nodes	Add

Reports
Download jobs	Add
Frequencies	Add
Report instances	Add
Report sections	Add
Reports	Add

Router
Agent call events	Add
Audiohook events	Add
Audiohook states	Add
Genesys agent states	Add
Genesys notification events	Add
Genesys queue to product mappings	Add

Sandbox
App Links	Add
Browser States	Add
CLI Commands	Add
CLI Issues	Add
CLI Sessions	Add
Sandbox Tasks	Add
Sandboxes	Add

Sessions
Sessions	Add

Systems
App keyframes	Add
App timeline frames	Add
Application pages	Add
Automation steps	Add
Custom apps	Add
Generic apps	Add
Grade links	Add
Html generations	Add
Os timeline annotations	Add
Os timeline apps	Add
Os timeline frames	Add
Os timelines	Add
Page links	Add
Screenshot to htmls	Add
Systems training attachments	Add
Systems training checkpoints	Add
Systems training recordings	Add
Systems trainings	Add

Taggit
Tags	Add

Ticket Management
Labels	Add
Tickets	Add

Training
Assignments	Add
Grading criterias	Add
Objection assignments	Add

Usage_Tracking
Llm calls	Add
Llm tags	Add
Stt calls	Add
Stt tags	Add
Tts calls	Add
Tts tags	Add

Wagtail documents
Documents	Add

Wagtail images
Images	Add

Change application page

ApplicationPage object (7)

History

Frozen

When frozen, this page cannot be edited

Locked

Html:

.metrics-current {
        flex: 1.2;
        min-width: 0;
    }

.metrics-reference {
        flex: 0.8;
        min-width: 0;
    }

/* Current Metrics Table - exact copy from 224 */
    .current-metrics-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        margin-bottom: 0;
    }

.current-metrics-table td:first-child {
        width: 32%;
        padding: 4px 8px 4px 0;
        vertical-align: middle;
    }

.current-metrics-table td:nth-child(2),
    .current-metrics-table td:nth-child(3) {
        width: 32.5%;
        padding: 4px 8px;
        text-align: center;
        vertical-align: middle;
    }

.current-metrics-table .header-label {
        font-size: 0.8rem;
        line-height: 1.2;
    }

.current-metrics-table .header-sublabel {
        font-size: 0.7rem;
        line-height: 1.1;
    }

.current-metrics-table .metric-name {
        font-size: 0.75rem;
        line-height: 1.2
    }

.current-metrics-table .metric-period {
        font-size: 0.7rem;
        line-height: 1.1;
    }

.current-metrics-table .metric-value {
        font-size: 0.75rem;
        padding: 4px;
    }

/* Update the SVG positioning in the driver level cell */
        .current-metrics-table .metric-value svg {
        vertical-align: middle;
        margin-right: 3px;
        position: relative;
        top: -1px;
    }

/* Reference table styles - exact copy from 224 */
    .reference-metrics-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        min-width: 280px;
    }

.reference-metrics-table th {
        padding: 8px 16px;
        text-align: center;
        border: none;
        color: #666;
        font-size: 0.75rem;
        font-weight: 500;
        background-color: #fff;
    }

.reference-metrics-table td {
        padding: 8px 16px;
        border: none;
        color: #666;
        font-size: 0.75rem;
        font-weight: bold;
        line-height: 1.4;
    }

.reference-metrics-table td:first-child {
        padding-left: 0;
        color: #666;
        font-weight: bold;
    }

.reference-metrics-table td:not(:first-child) {
        text-align: center;
        border-left: 1px solid #ddd;
        color: #333;
        font-weight: bold;
    }

/* Section title and footnote - exact copy from 224 */
    .reference-section .section-title {
        font-size: 0.8rem;
        margin-bottom: 12px;
    }

.reference-section .footnote {
        font-size: 0.7rem;
        margin-top: 12px;
        font-weight: normal;
        color: #666;
    }

/* Media queries - exact copy from 224 */
    @media (max-width: 1400px) {
        .metrics-content {
            gap: 0.8rem;
        }
        
        .metrics-current {
            min-width: 320px;
        }
        
        .metrics-reference {
            min-width: 240px;
        }
    }

@media (max-width: 1200px) {
        .metrics-content {
            flex-wrap: wrap;
        }
        
        .metrics-current,
        .metrics-reference {
            flex: 1 1 100%;
            min-width: 100%;
        }
    }

/* Driver Card Styles */
    .driver-card {
        background: #f8f8f8;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 1.2rem;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        margin-bottom: 1rem;
        flex: 0 0 360px;
        min-width: 280px;
        max-width: 350px;
        position: relative;
    }
    .profile-pic {
        display: block;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto;
    }
    .driver-status {
        margin: 0.8rem 0;
        padding: 0.6rem;
        background-color: #ff0000;
        color: white;
        font-weight: bold;
        text-align: center;
        border-radius: 4px;
        font-size: 0.8rem;
    }
    .driver-card h1 {
        font-size: 1.6rem;
        margin-bottom: 0.6rem;
    }
    .driver-card p {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
    /* Info List Styles */
    .info-list {
        list-style: none;
        padding: 0.4rem 0;
        margin: 0.4rem 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0.2rem;
    }
    .info-list li {
        padding: 0.5rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        text-align: center;
    }
    .info-list .label,
    .info-label {
        font-weight: bold;
        color: #666;
    }
    .info-list .label {
        font-size: 0.65rem;
    }
    .info-list .value,
    .info-value {
        color: #333;
    }
    .info-list .value {
        font-size: 0.75rem;
    }
    /* Personal Info Styles */
    .personal-info,
    .secure-info,
    .background-check {
        margin-top: 1.4rem;
        padding-top: 1.4rem;
        border-top: 1px solid #ccc;
    }
    .info-row {
        display: flex;
        margin-bottom: 0.8rem;
        align-items: baseline;
    }
    .info-label {
        width: 100px;
        font-weight: 700;
        font-size: 0.85rem;
        color: #000;
    }
    .info-value {
        text-align: left;
        font-size: 0.9rem;
        color: #333;
        flex: 1;
    }
    .info-value.editable {
        padding: 0.6rem 0.8rem;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: white;
        min-width: 200px;
        font-size: 0.75rem;
        color: #333;
        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .info-value.editable:focus {
        outline: none;
        border-color: #1886be;
        box-shadow: 0 0 0 3px rgba(24, 134, 190, 0.1);
    }
    .info-value input.editable {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: white;
        font-size: 0.9rem;
        color: #333;
        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .info-value input.editable:focus {
        outline: none;
        border-color: #1886be;
        box-shadow: 0 0 0 3px rgba(24, 134, 190, 0.1);
    }
    .send-sms {
        color: #0066cc;
        text-decoration: none;
        margin-left: 0.5rem;
        font-size: 0.9rem;
    }
    .info-icon {
        color: #0066cc;
        margin-left: 0.5rem;
    }
    /* Headings */
    h1 {
        font-size: 1.5rem;
        color: #333;
        margin-bottom: 1rem;
    }
    h2 {
        font-size: 1.2rem;
        color: #666;
        margin-bottom: 1rem;
    }
    h3 {
        font-size: 1.4rem;
        margin-bottom: 1.2rem;
        color: #333;
    }
    /* Self Service Section Styles */
    .self-service-top {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: nowrap; /* Prevent wrapping initially */
        margin-bottom: 0.8rem;
    }
    .self-service-top h1 {
        margin-bottom: 0;
    }
    .status-select {
        flex: 1;
        min-width: 200px;
        max-width: 400px;
    }
    .start-task-btn {
        background: #1886be;
        color: white;
        border: none;
        padding: 8px 24px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        transition: background-color 0.2s ease;
        margin-left: auto;
        white-space: nowrap;
    }
    .start-task-btn:hover {
        background: #1575a7;
    }
    .table-container {
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
    }
    .table-header {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        padding: 12px 16px;
        background: #ddd;
        border-bottom: 1px solid #ddd;
        gap: 1rem;
    }
    .table-cell {
        color: #444;
        font-size: 0.9rem;
        cursor: pointer;
        white-space: nowrap;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .table-cell::after {
        content: "▼";
        font-size: 8px;
        color: #666;
    }
    .table-cell:hover {
        color: #1886be;
    }
    .no-image.pngs-message {
        text-align: center;
        padding: 2rem;
        color: #666;
        font-size: 0.9rem;
        background: white;
        border-radius: 0;
        margin: 0;
    }
    /* Center Column Styles */
    .center-column {
        flex: 1;
        min-width: 280px;
        max-width: 100%; /* Ensure it doesn't overflow container */
        padding: 0.5rem;
    }
    /* Placeholder Content */
    .placeholder-content {
        margin-top: 1rem;
        padding: 1.4rem;
        background: #f8f8f8;
        border-radius: 4px;
        color: #666;
        text-align: center;
    }
    .note {
        color: #888;
        font-size: 0.95rem;
        margin: 1rem 0;
        width: 80%;
    }
    /* Content Container Styles */
    .content {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 1rem;
    }
    .placeholder {
        margin-top: 0;
        padding: 1.4rem;
        background: #f8f8f8;
        border-radius: 4px;
        color: #666;
        text-align: center;
    }
    /* Table Container Styles */
    .table-container {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 1rem;
    }
    /* Schedule Grid Styles */
    .schedule-grid {
        overflow-x: auto; /* Allow horizontal scrolling if needed */
        min-width: 280px;
    }
    .schedule-header {
        min-width: 600px; /* Ensure minimum width for readability */
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        padding: 8px;
        background: #fff;
        border-bottom: 1px solid #ddd;
    }
    .day-header {
        padding: 8px;
        text-align: center;
        font-weight: bold;
        color: #333;
        font-size: 0.85rem;
        white-space: pre-line;
    }
    .schedule-body {
        min-width: 600px;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        padding: 8px;
    }
    .schedule-block {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 8px;
        position: relative;
        min-height: 36px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .schedule-block.dropped {
        background: #f8f8f8;
        border-color: #ddd;
    }
    .schedule-block .time {
        font-size: 0.9rem;
        font-weight: 500;
        color: #333;
        text-align: center;
        margin-bottom: 4px;
    }
    .schedule-block .driver-name {
        font-size: 0.6rem;
        color: #666;
        text-align: center;
    }
    .status-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #ff4444;
        color: white;
        padding: 2px 6px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: bold;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .schedule-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.8rem;
    }
    .schedule-title-group {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .schedule-title-group h1 {
        margin: 0;
    }
    .status-indicator {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .status-dot {
        width: 12px;
        height: 12px;
        background-color: #ff4444;
        border-radius: 50%;
        display: inline-block;
    }
    .status-text {
        color: #666;
        font-size: 0.9rem;
    }
    .open-schedule-link {
        color: #1886be;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: bold;
    }
    .open-schedule-link:hover {
        text-decoration: underline;
    }
    /* Driver Card Styles */
    .driver-card {
        background: #f8f8f8;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 1rem;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        margin-bottom: 1rem;
        flex: 0 0 300px;
        min-width: 280px;
        max-width: 350px;
        position: relative;
    }
    .edit-button {
        position: absolute !important;
        top: 1rem;
        right: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: transparent;
        border: none;
        color: #666;
        font-size: 0.9rem;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.2s ease;
        z-index: 50;
    }

.edit-button:hover {
        color: #333;
    }
    .edit-button svg {
        width: 14px;
        height: 14px;
    }

.info-value.editable {
        padding: 0.25rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: white;
        min-width: 200px;
    }
    .info-value.editable:focus {
        outline: 2px solid #1886be;
        border-color: #1886be;
    }
    /* Add Modal Styles */
    .modal {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 1000000; /* Higher than tour button's 999999 */
    }

.modal.show {
        display: block;
    }

.modal-overlay {
        position: absolute;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000000; /* Match modal */
    }

.modal-container {
        position: absolute;
        max-height: 80%;
        overflow-y: auto;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        background: white;
        border-radius: 8px;
        z-index: 1000001; /* Slightly higher than overlay */
    }

.personal-info-form .info-row {
        margin-bottom: 16px;
    }

.personal-info-form .info-label {
        display: inline-block;
        width: 120px;
        font-weight: 500;
    }

.personal-info-form .info-value.editable {
        width: calc(100% - 130px);
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

.personal-info-form select.info-value.editable {
        height: 35px;
    }

.metrics-reference {
        padding: 20px;
        background: #fff;
        border-radius: 4px;
    }

.metrics-reference .change-level {
        display: block;
        text-align: right;
        color: #0066cc;
        text-decoration: none;
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

.metrics-reference h2 {
        color: #666;
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 15px;
    }

.metrics-reference .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 15px;
    }

.metrics-reference .table th,
    .metrics-reference .table td {
        padding: 6px;
        text-align: left;
        border: none;
        color: #666;
        font-size: 0.75rem;
    }

.metrics-reference .table th {
        font-weight: 500;
    }

.metrics-reference .table td.metric-label {
        color: #666;
        font-weight: 500;
    }

.metrics-reference .table td.metric-value {
        color: #666;
    }

.metrics-reference .note {
        color: #888;
        font-size: 0.85rem;
        margin: 0;
        line-height: 1.4;
    }

/* Left side - Current Metrics */
    .current-metrics-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

.current-metrics-table td {
        padding: 4px 8px 4px 0;
        vertical-align: top;
    }

/* Header Row Styling */
    .current-metrics-table .header-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #000000;
        margin-bottom: 4px;
        text-align: center;
    }

.current-metrics-table .header-sublabel {
        font-size: 0.7rem;
        color: #666;
        font-weight: 750;
        text-align: center;
    }

/* Metric Row Styling */
    .current-metrics-table .metric-name {
        font-size: 0.75rem;
        font-weight: 600;
        color: #333;
    }

.current-metrics-table .metric-period {
        font-size: 0.7rem;
        color: #666;
        font-weight: 750;
        display: block;
    }

/* Grid Cell Borders */
    .current-metrics-table tr:nth-child(n+2):nth-child(-n+5) td:nth-child(2),
    .current-metrics-table tr:nth-child(n+2):nth-child(-n+5) td:nth-child(3) {
        border: 1px solid #ddd;
    }

/* Value Cells */
    .current-metrics-table .metric-value {
        text-align: center;
        color: #333;
        font-size: 0.75rem;
        font-weight: bold;
        vertical-align: middle;
    }

/* Center align the cells themselves */
    .current-metrics-table td:nth-child(2),
    .current-metrics-table td:nth-child(3) {
        text-align: center;
        vertical-align: middle;
    }

/* Right side - Reference Table */
    .reference-metrics-table {
        width: 100%;
        table-layout: fixed;
        min-width: 280px;
        border: none;
    }

.reference-metrics-table th {
        padding: 8px 16px;
        text-align: center;
        border: none;
        color: #666;
        font-size: 0.75rem;
        font-weight: bold;
        background-color: #fff;
    }

.reference-metrics-table td {
        padding: 8px 16px;
        border: none;
        color: #666;
        font-size: 0.75rem;
        font-weight: bold;
        line-height: 1.4;
    }

.reference-metrics-table td:first-child {
        padding-left: 0;
        color: #666;
        font-weight: bold;
    }

.reference-metrics-table td:not(:first-child) {
        text-align: center;
        border-left: 1px solid #ddd;
        color: #333;
        font-weight: bold;
    }

/* Adjust spacing between rows */
    .reference-metrics-table tr:not(:last-child) td {
        padding-bottom: 8px;
    }

/* Ensure consistent vertical alignment */
    .reference-metrics-table td {
        vertical-align: middle;
        height: 36px; /* Reduced from 44px */
    }

/* Match header styles */
    .reference-metrics-table th {
        height: 36px; /* Reduced from 48px */
        vertical-align: middle;
    }

/* Section title adjustments */
    .reference-section .section-title {
        font-size: 0.8rem;
        margin-bottom: 12px;
    }

/* Footnote adjustments */
    .reference-section .footnote {
        font-size: 0.7rem;
        margin-top: 12px;
        font-weight: normal;
        color: #666;
    }

/* Add media query for smaller screens */
    @media (max-width: 1400px) {
        .metrics-content {
            gap: 0.8rem;
        }
        
        .metrics-current {
            min-width: 320px;
        }
        
        .metrics-reference {
            min-width: 240px;
        }
    }

@media (max-width: 800px) {
        .self-service-top {
            flex-wrap: wrap;
        }
        
        .status-select {
            min-width: 100%;
        }
        
        .start-task-btn {
            margin-left: 0;
            width: 100%;
        }
    }

/* Add this to your existing styles */
    .empty-column {
        min-height: 200px;
        border-right: 1px solid #eee;
    }
    .empty-column:last-child {
        border-right: none;
    }

/* Modal adjustments */
    .modal-container {
        padding: 16px;
    }

.modal-container h3 {
        font-size: 14px;
        margin-bottom: 16px;
    }

/* Modal buttons */
    .close-modal {
        position: absolute !important;
        top: 8px;
        right: 16px;
        background: none;
        border: none;
        font-size: 2.5rem;
        cursor: pointer;
    }
    .cancel-btn {
        padding: 6px 12px;
        font-size: 14px;
    }

.win-button,
    .create-btn {
        padding: 6px 20px;
        font-size: 14px;
    }

/* Task select modal */
    .task-select {
        padding: 6px;
        margin-bottom: 12px;
    }

.date-input {
        padding: 6px;
        padding-right: 32px;
    }

.calendar-button {
        width: 32px;
    }

.calendar-header {
        padding: 8px;
    }

.calendar-grid {
        padding: 8px;
    }

.weekdays {
        margin-bottom: 6px;
        font-size: 10px;
    }

.days div {
        padding: 6px;
        font-size: 10px;
    }

/* Form elements in modal */
    .personal-info-form .info-row {
        margin-bottom: 12px;
    }

.personal-info-form .info-label {
        width: 100px;
    }

.personal-info-form .info-value.editable {
        width: calc(100% - 110px);
        padding: 6px;
    }

.personal-info-form select.info-value.editable {
        height: 32px;
    }

/* Status select dropdown */
    .status-select {
        padding: 6px 10px;
        font-size: 12px;
    }

/* Task buttons */
    .start-task-btn {
        padding: 6px 20px;
        font-size: 12px;
    }

/* Add these styles to your existing style block */
    .modal {
        display: none;
        position: absolute; /* Change from fixed to absolute */
        inset: 0;
        z-index: 1000;
    }

.modal.show {
        display: block;
    }

.modal-overlay {
        position: absolute; /* Change from fixed to absolute */
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
    }

.modal-container {
        position: absolute;
        /* Remove top/left/transform as they'll be set dynamically */
        max-height: 80%; /* Reduce from 90% to ensure it fits better */
        overflow-y: auto;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        background: white;
        border-radius: 8px;
    }

/* Add specific positioning for nested modals */
    .modal .modal {
        z-index: 1000002; /* Higher z-index for nested modals */
    }

.modal .modal .modal-container {
        z-index: 1000003; /* Even higher for nested modal containers */
    }

</style>
<div>
<nav class="top-nav">
    <div class="nav-counter">0</div>
    <div class="nav-items">
        <span>Markets</span>
        <span>Applicants</span>
        <span>Drivers</span>
        <span>Scheduling</span>
        <span>Deliveries</span>
        <span>Payments</span>
        <span>Admin</span>
    </div>
    <div class="nav-icons">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </div>
</nav>
<div class="sub-header">
    <div class="sub-header-content">
        <a href="#" class="back-link">{{courier_name}}</a>
        <div class="sub-nav">
            <button id="assets-287">Assets</button>
            <button id="comment-board-287">Comment board</button>
            <button id="driver-activity-log-287">Driver activity log</button>
        </div>
    </div>
</div>
<div class="main-content">
    
    <div class="driver-card">
        <button class="edit-button" id="edit-button-287">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Edit
        </button>
    <div id="face-name-region" style="position: relative;">
        <img class="profile-pic" width="64" height="64" src="https://images.generated.photos/MmgrtECwc2LJyil8BooXCeKUng5zMsj9C0T3SbxRjlw/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/NDE2MTU0LmpwZw.jpg" style="border-radius: 50%; object-fit: cover;">
        <h1>{{courier_name}}</h1>
        <p>{{region}}</p>
    </div>
        <ul class="info-list" name="info-list" id="info-list-287" style="position: relative;">
            <li>
                <span class="label">Status</span>
                <span class="value">{{courier_status}}</span>
            </li>
            <li>
                <span class="label">Level</span>
                <span class="value">{{courier_level}}</span>
            </li>
            <li>
                <span class="label">Vehicle</span>
                <span class="value">{{vehicle_type|title}}</span>
            </li>
            <li>
                <span class="label">Alcohol Eligible</span>
                <span class="value">Yes</span>
            </li>
            <li>
                <span class="label">Auto Accept</span>
                <span class="value">OFF</span>
            </li>
        </ul>
        <div class="personal-info" id="personal-info-287">
            <h3>Personal info</h3>
            <div class="info-row">
                <span class="info-label">Legal name</span>
                <span class="info-value">{{courier_name}}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Chosen name</span>
                <span class="info-value">{{courier_name}}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Email</span>
                <span class="info-value">{{courier_name}}@email.com</span>
            </div>
            <div class="info-row">
                <span class="info-label">Phone</span>
                <span class="info-value">{{phone_number}}<a href="#" class="send-sms">Send SMS</a></span>
            </div>
            <div class="info-row">
                <span class="info-label">Address</span>
                <span class="info-value">{{customer_address}}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Employer type</span>
                <span class="info-value">Independent Contractor</span>
            </div>
            <div class="info-row">
                <span class="info-label">Device OS</span>
                <span class="info-value">IphoneAppStore</span>
            </div>
            <div class="info-row">
                <span class="info-label">Courier ID</span>
                <span class="info-value">{{courier_ID}}</span>
            </div>
            <div class="info-row">
                <span class="info-label">External ID</span>
                <span class="info-value">N/A</span>
            </div>
            <div class="info-row">
                <span class="info-label">Time zone</span>
                <span class="info-value">{{timezone}}</span>
            </div>
        </div>
        <div class="secure-info">
            <h3>Secure info</h3>
            <span class="info-value">You must have the deliverypopscenter.ats.securefields claim to view this data</span>
        </div>
        <div class="background-check">
            <h3>Background Check info</h3>
            <div class="info-row">
                <span class="info-label">Background Check Profile ID</span>
                <span class="info-value">6804dea46dda139b51b95c1</span>
            </div>
            <a href="#" class="view-profile">View Background Check Profile</a>
        </div>
    </div>
    
    <div class="center-column">
        <div class="section metrics">
            <h3>Driver Incentives Program Metrics</h3>
            <div class="metrics-content">
                <div class="metrics-current">
                    <table class="current-metrics-table">
                        <tr>
                            <td></td>
                            <td>
                                <div class="header-label">Last assessment</div>
                                <div class="header-sublabel">Updates weekly</div>
                                <div class="header-sublabel">Last updated: Monday, 12:45 PM</div>
                            </td>
                            <td>
                                <div class="header-label">Current stats</div>
                                <div class="header-sublabel">Updates in real time</div>
                                <div class="header-sublabel">Last updated: Thu, 2/6 10:00 AM</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="metric-name">Offer Commitment</div>
                                <div class="metric-period">Last 14 days</div>
                            </td>
                            <td class="metric-value">{{offer_commitment_last}}%</td>
                            <td class="metric-value">{{offer_commitment_current}}%</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="metric-name">On Time Arrival At Merchant</div>
                                <div class="metric-period">Last 14 days</div>
                            </td>
                            <td class="metric-value">{{merchant_arrival_last}}%</td>
                            <td class="metric-value">{{merchant_arrival_current}}%</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="metric-name">Schedule Commitment</div>
                                <div class="metric-period">Last 14 days</div>
                            </td>
                            <td class="metric-value">{{schedule_commitment_last}}%</td>
                            <td class="metric-value">{{schedule_commitment_current}}%</td>
                        </tr>
                        <tr id="deliveries">
                            <td>
                                <div class="metric-name">Total deliveries</div>
                            </td>
                            <td class="metric-value">{{completed_deliveries}}</td>
                            <td class="metric-value"></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="metric-name">Driver level</div>
                            </td>
                            <td class="metric-value" style="text-transform: uppercase;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#ff8000" viewBox="0 0 256 256">
                                    <path d="M80.57,117A8,8,0,0,1,91,112.57l29,11.61V96a8,8,0,0,1,16,0v28.18l29-11.61A8,8,0,1,1,171,127.43l-30.31,12.12L158.4,163.2a8,8,0,1,1-12.8,9.6L128,149.33,110.4,172.8a8,8,0,1,1-12.8-9.6l17.74-23.65L85,127.43A8,8,0,0,1,80.57,117ZM224,56v56c0,52.72-25.52,84.67-46.93,102.19-23.06,18.86-46,25.27-47,25.53a8,8,0,0,1-4.2,0c-1-.26-23.91-6.67-47-25.53C57.52,196.67,32,164.72,32,112V56A16,16,0,0,1,48,40H208A16,16,0,0,1,224,56Zm-16,0L48,56l0,56c0,37.3,13.82,67.51,41.07,89.81A128.25,128.25,0,0,0,128,223.62a129.3,129.3,0,0,0,39.41-22.2C194.34,179.16,208,149.07,208,112Z"></path>
                                </svg>{{courier_level}}
                            </td>
                            <td class="metric-value"></td>
                        </tr>
                    </table>
                </div>
                <div class="metrics-reference">
                    <table class="reference-metrics-table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Premier</th>
                                <th>Pro</th>
                                <th>Partner</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Offer Commitment</td>
                                <td>95%</td>
                                <td>80%</td>
                                <td>N/A</td>
                            </tr>
                            <tr>
                                <td>On Time Arrival At Merchant</td>
                                <td>80%</td>
                                <td>70%</td>
                                <td>N/A</td>
                            </tr>
                            <tr>
                                <td>Schedule Commitment</td>
                                <td>95%</td>
                                <td>80%</td>
                                <td>N/A</td>
                            </tr>
                        </tbody>
                    </table>
                    <p class="footnote">For drivers with more than 20 deliveries, levels are determined by activity in the 14 days before the last update. Updates occur each Monday.</p>
                </div>
            </div>
        </div>
        <div class="section self-service">
            <div class="self-service-top">
                <h1>Self Service</h1>
                <select class="status-select">
                    <option>ACTIVE, PROCESSING</option>
                </select>
                <button id="start-task-287" class="start-task-btn">Start new task +</button>
            </div>
            <div class="table-container">
                <div class="table-header">
                    <span class="table-cell">Type</span>
                    <span class="table-cell">Status</span>
                    <span class="table-cell">Due date</span>
                    <span class="table-cell">Created at</span>
                    <span class="table-cell">Created by</span>
                    <span class="table-cell">Updated at</span>
                    <span class="table-cell">Cancelled at</span>
                    <span class="table-cell">Cancelled by</span>
                    <span class="table-cell">Actions</span>
                </div>
                <div class="no-tasks-message">
                    <p><br></p>
                    <p><em>No self service tasks found</em></p>
                </div>
            </div>
        </div>
        <div class="section schedule">
            <div class="schedule-section-header">
                <div class="schedule-title-group">
                    <h1>Schedule</h1>
                    <div class="status-indicator">
                        <span class="status-dot"></span>
                        <span class="status-text">Unavailable</span>
                    </div>
                </div>
                <a href="#" class="open-schedule-link">Open full schedule</a>
            </div>
            <div class="content schedule-grid" id="schedule-section-287" style="position: relative;">
                <div class="schedule-header">
                    {% for date in week_dates %}
                    <div class="day-header">{{ date }}</div>
                    {% endfor %}
                </div>
                <div class="schedule-body">
                    {% if scheduled_blocks and status != "Scheduling Restricted" %}
                        
                        {% with blocks=6 days=7 %}
                            {% for day in week_dates %}
                                <div class="schedule-block">
                                    <div class="time">12am-1am</div>
                                    <div class="driver-name">{{ courier_name }}</div>
                                </div>
                                <div class="schedule-block dropped">
                                    <div class="time">1am-2am</div>
                                    <div class="driver-name">{{ courier_name }}</div>
                                    <div class="status-badge">Dropped</div>
                                </div>
                                <div class="schedule-block">
                                    <div class="time">2am-3am</div>
                                    <div class="driver-name">{{ courier_name }}</div>
                                </div>
                                <div class="schedule-block">
                                    <div class="time">3am-4am</div>
                                    <div class="driver-name">{{ courier_name }}</div>
                                </div>
                                <div class="schedule-block dropped">
                                    <div class="time">6am-7am</div>
                                    <div class="driver-name">{{ courier_name }}</div>
                                    <div class="status-badge">Dropped</div>
                                </div>
                                <div class="schedule-block">
                                    <div class="time">7am-8am</div>
                                    <div class="driver-name">{{ courier_name }}</div>
                                </div>
                            {% endfor %}
                        {% endwith %}
                    {% else %}
                        
                        {% for i in week_dates %}
                            <div class="empty-column"></div>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="section trip-history">
            <h1>Trip History</h1>
            <div class="content">
                <div class="placeholder"></div>
            </div>
        </div>
        <div class="section violations">
            <h1>Account Violations</h1>
            <div class="content">
                <div class="placeholder"></div>
            </div>
        </div>
        <div class="section pay">
            <h1>Pay Reports</h1>
            <p><em>There are no results for this pay period</em></p>
        </div>
        <div class="section disbursements">
            <h1>Disbursements</h1>
            <p><em>There are no disbursements for this period</em></p>
        </div>
    </div>
</div>
</div>

<div id="edit_personal_info_modal-287" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-container" style="width: 500px; background: white; padding: 20px; border-radius: 8px;">
        <div style="text-align: right; margin-bottom: 16px;">
            <button class="win-button" id="save_edit-287" style="background: #0066cc; color: white; border: none; padding: 8px 24px; border-radius: 4px; cursor: pointer; font-size: 16px;">Save</button>
        </div>
        <div style="border-bottom: 1px solid #ddd; padding-bottom: 10px;">
            <h3 style="margin: 0;">Personal info</h3>
        </div>
        <div class="personal-info-form">
            <div class="info-row">
                <span class="info-label">First Name</span>
                <input type="text" class="info-value editable" value="{{first_name}}">
            </div>
            <div class="info-row">
                <span class="info-label">Last Name</span>
                <input type="text" class="info-value editable" value="{{last_name}}">
            </div>
            <div class="info-row">
                <span class="info-label">Chosen name</span>
                <input type="text" class="info-value editable" value="{{courier_name}}">
            </div>
            <div id="market-row-287" class="info-row">
                <span class="info-label">Market</span>
                <select class="info-value editable">
                    <option>{{region}}</option>
                    <option>{{target_region}}</option>
                </select>
            </div>
            <div class="info-row">
                <span class="info-label">Status</span>
                <select name="status-select-287" id="status-select-287" class="info-value editable">
                    <option>Ready to Drive</option>
                    <option selected>Active</option>
                    <option>Idle</option>
                    <option>Temporary Suspension Driver Accounting</option>
                    <option>Scheduling Restricted</option>
                    <option>Terminated Voluntary</option>
                    <option>Terminated Involuntary</option>
                    <option>Disengaged</option>
                    <option>Temporary Suspension</option>
                    <option>Inactive Suspension Without Pay</option>
                    <option>Inactive Account Violations</option>
                    <option>Inactive</option>
                </select>

</div>
            <div class="info-row">
                <span class="info-label">Vehicle</span>
                <input type="text" class="info-value editable" value="">
            </div>
            <div class="info-row">
                <span class="info-label">Vehicle description</span>
                <input type="text" class="info-value editable" value="">
            </div>
            <div class="info-row">
                <span class="info-label">Large orders</span>
                <select class="info-value editable">
                    <option>Allowed</option>
                    <option>Not allowed</option>
                </select>
            </div>
            <div class="info-row">
                <span class="info-label">Catering orders</span>
                <select class="info-value editable">
                    <option>Allowed</option>
                    <option>Not allowed</option>
                </select>
            </div>
            <div class="info-row">
                <span class="info-label">Alcohol orders</span>
                <select class="info-value editable">
                    <option>Allowed</option>
                    <option>Not allowed</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div id="task-select-modal-287" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-container" style="width: 400px; background: white; padding: 20px; border-radius: 8px; max-height: fit-content;">
        <h3 style="margin: 0 0 20px 0;">Select a task</h3>
        
        <div style="display: flex; flex-direction: column; gap: 4px;">
            
            <select id="id-update-287" name="id-update-287" class="task-select" 
                    style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                <option value="">Please select</option>
                <option value="tax_info">TAX INFO UPDATE</option>
                <option value="id_update">ID UPDATE</option>
            </select>
            
            <div style="display: flex; flex-direction: column; margin-bottom: 20px;">
                <div class="date-input-container" style="position: relative;">
                    <input type="text"
                           name="date-input-287"
                           id="date-input-287"
                           placeholder="MM/DD/YYYY" 
                           class="date-input" 
                           style="width: 100%; 
                                  padding: 8px; 
                                  border: 1px solid #ddd; 
                                  border-radius: 4px;
                                  padding-right: 40px;"
                           readonly>
                    <button class="calendar-button" id="calendar-button-287"
                            style="position: absolute;
                                   right: 0;
                                   top: 0;
                                   bottom: 2px;
                                   width: 40px; 
                                   background: none;
                                   border: none;
                                   border-left: 1px solid #ddd;
                                   cursor: pointer;
                                   font-size: 20px;">
                        📅
                    </button>
                </div>
                
                
                <div class="calendar-dropdown" 
                     style="display: none; 
                            width: 100%; 
                            background: white; 
                            border: 1px solid #ddd; 
                            border-radius: 4px; 
                            margin-top: 4px; 
                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <div class="calendar-header" style="display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee;">
                        <button class="prev-month" style="border: none; background: none; cursor: pointer;">←</button>
                        <span class="current-month" style="font-weight: bold;"></span>
                        <button class="next-month" style="border: none; background: none; cursor: pointer;">→</button>
                    </div>
                    <div class="calendar-grid" style="padding: 10px;">
                        <div class="weekdays" style="display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: bold; margin-bottom: 8px;">
                            <div>Su</div><div>Mo</div><div>Tu</div><div>We</div><div>Th</div><div>Fr</div><div>Sa</div>
                        </div>
                        <div class="days" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
            <button class="cancel-btn" 
                    style="background: none;
                           border: none;
                           padding: 8px 16px;
                           margin-right: 10px;
                           cursor: pointer;">
                Cancel
            </button>
            <button class="create-btn" id="create-task-287"
                    style="background: #1886be;
                           color: white;
                           border: none;
                           padding: 8px 24px;
                           border-radius: 4px; 
                           cursor: pointer;">
                Create
            </button>
        </div>
    </div>
</div>

<div id="comment-board-modal-287" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-container" style="width: 90%; max-width: 800px; height: 80vh; background: white; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        
        <div class="header" style="padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dee2e6;">
            <h4 style="margin: 0; font-size: 16px; color: #333;">Comments (01/01/2025 - {{today_date}})</h4>
            <button class="close-modal" id="close-comment-board-modal-287" style="background: none; border: none; cursor: pointer; padding: 0; font-size: 16px; color: #0066cc; line-height: 1;">✕</button>
        </div>

<div style="padding: 16px 16px 0 16px;">
            <div class="date-picker-container" style="width: 33%; display: flex; align-items: center;">
                <select style="width: 100%;
                              padding: 8px 12px;
                              font-size: 13px;
                              border: 1px solid #ced4da;
                              border-radius: 4px;
                              color: #666;">
                    <option>01/01/2025 - {{today_date}}</option>
                    <option disabled>01/01/2024 - 12/31/24</option>
                    <option disabled>01/01/2023 - 12/31/23</option>
                    <option disabled>01/01/2022 - 12/31/22</option>
                </select>
                <button style="margin-left: 8px;
                             background: none;
                             border: none;
                             color: #0066cc;
                             cursor: pointer;
                             padding: 4px;
                             font-size: 20px;">
                    📅
                </button>
            </div>
        </div>

<div class="filters" style="padding: 16px; border-bottom: 1px solid #dee2e6;">
            <button class="add-new-btn" id="addNewCommentBtn-287" 
                    style="background-color: #0066cc; 
                           color: white; 
                           border: none; 
                           padding: 8px 16px; 
                           border-radius: 4px; 
                           cursor: pointer;
                           font-size: 13px;
                           font-weight: 500;">Add New</button>
        </div>

<div style="padding: 8px 16px; border-bottom: 1px solid #dee2e6;">
            <select class="form-control" id="areaSelect-287" 
                    style="width: 100%; 
                           padding: 8px 12px; 
                           font-size: 13px; 
                           border: 1px solid #ced4da; 
                           border-radius: 4px;
                           color: #666;">
                <option>All areas selected</option>
                <option>General</option>
                <option>Fraud</option>
                <option>Onboarding</option>
            </select>
        </div>

<div class="comment-table" id="last-transfer" style="flex: 1; overflow: auto; padding: 0 16px;">
            <table class="table" style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background-color: #f8f9fa;">
                        <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #0066cc; border-bottom: 1px solid #dee2e6;">Date ▼</th>
                        <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Area</th>
                        <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Comment</th>
                        <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Left by</th>
                    </tr>
                </thead>
                <tbody>
                    {% if last_transfer_date and last_transfer_date != "Never" %}
                    <tr>
                        <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">{{last_transfer_date}}</td>
                        <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">Market Transfer</td>
                        <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">
                            Transferred on ({{last_transfer_date}}) - Can transfer markets in 14 days.<br>
                            Task Type: IDENTITY_VERIFICATION
                        </td>
                        <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">fellow.coworker@grubhub.com</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="new-comment-modal-287" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-container" style="width: 600px; background: white; padding: 20px; border-radius: 8px;">
        <select class="form-select" name="commentAreaSelect-287" id="commentAreaSelect-287" style="width: 100%; padding: 0.375rem 0.75rem; margin-bottom: 1rem; border: 1px solid #ced4da; border-radius: 4px;">
            <option selected disabled>Select an area / category</option>
            <option value="general">General</option>
            <option value="fraud">Fraud</option>
            <option value="onboarding">Onboarding</option>
        </select>
        
        <textarea class="comment-textarea" id="commentTextarea-287" name="commentTextarea-287" placeholder="Add comment as text or Markdown..." 
                  style="width: 100%; min-height: 150px; margin: 15px 0; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; resize: vertical;"></textarea>
        
        <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
            <button class="preview-btn" id="previewCommentBtn-287" 
                    style="flex: 1; padding: 8px 24px; border: 1px solid #127fc2; background: white; color: #127fc2; border-radius: 4px; cursor: pointer;">Preview</button>
            <button class="cancel-btn" id="cancelCommentBtn-287"
                    style="flex: 1; padding: 8px 24px; border: 1px solid #6c757d; background: white; color: #6c757d; border-radius: 4px; cursor: pointer;">Cancel</button>
            <button class="save-btn" id="saveCommentBtn-287"
                    style="flex: 1; padding: 8px 24px; background: #e9ecef; border: none; color: #adb5bd; border-radius: 4px; cursor: not-allowed;">Save</button>
        </div>
    </div>
</div>

<div id="assets-modal-287" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-container" style="width: 90%; max-width: 1200px; height: 90vh; background: white; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column;">
        <div class="header" style="padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dee2e6;">
            <h4 style="margin: 0; font-size: 16px; color: #333;">Assets</h4>
            <button class="close-modal" id="close-assets-modal-btn-287" style="background: none; border: none; cursor: pointer; padding: 0; font-size: 16px; color: #0066cc; line-height: 1;">✕</button>
        </div>

<div style="font-size: 14px; font-weight: 600; margin: 24px 0 16px;">In review</div>
            <div class="table-container">
                <table class="table" style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr style="background-color: #f8f9fa;">
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Asset Type</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Asset Description</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Last Uploaded At</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Last Uploaded By</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Last Updated At</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Status</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">View</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="7" style="text-align: center; padding: 16px; color: #666; font-size: 13px;">No Results Found</td>
                        </tr>
                    </tbody>
                </table>
            </div>

<div style="font-size: 14px; font-weight: 600; margin: 24px 0 16px;">Finalized</div>
            <div id="finalized-assets-287" class="table-container" style="position: relative;">
                <table class="table" style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr style="background-color: #f8f9fa;">
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Asset Type</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Asset Description</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Last Uploaded At</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Last Uploaded By</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Last Updated At</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">Status</th>
                            <th style="padding: 12px 8px; text-align: left; font-size: 13px; font-weight: 600; color: #666; border-bottom: 1px solid #dee2e6;">View</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">BIOMETRIC_SELFIE</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">Selfie Pic of Courier</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">11/13/2024, 8:27</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">{{ email }}</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">11/14/2024, 9:35</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">
                                <span style="display: inline-block; padding: 4px 8px; background-color: #e8f5e9; color: #2e7d32; border-radius: 4px; font-size: 12px; font-weight: 500;">APPROVED</span>
                            </td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">
                                <button type="button" class="view-btn" style="color: #0066cc; text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; font-size: 13px;">View Latest</button>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">DRIVER_LICENSE_FRONT</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">Front of Driver License</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">11/13/2024, 8:27</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">{{ email }}</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">11/14/2024, 9:35</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">
                                <span style="display: inline-block; padding: 4px 8px; background-color: #e8f5e9; color: #2e7d32; border-radius: 4px; font-size: 12px; font-weight: 500;">APPROVED</span>
                            </td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">
                                <button type="button" class="view-btn" id="driverLicenseFrontBtn-287" style="color: #0066cc; text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; font-size: 13px;">View Latest</button>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">DRIVER_LICENSE_BACK</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">Back of Driver License</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">11/13/2024, 8:27</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">{{ email }}</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">11/14/2024, 9:35</td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">
                                <span style="display: inline-block; padding: 4px 8px; background-color: #e8f5e9; color: #2e7d32; border-radius: 4px; font-size: 12px; font-weight: 500;">APPROVED</span>
                            </td>
                            <td style="padding: 12px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #dee2e6;">
                                <button type="button" class="view-btn" style="color: #0066cc; text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; font-size: 13px;">View Latest</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

<div id="dl-modal-287" class="modal">
        <div class="modal-overlay"></div>
        <div id="driver-license-modal-content" class="modal-container" style="width: 400px; background: white; padding: 20px; border-radius: 8px;">
            <button class="close-modal" id="close-dl-modal-btn-287" aria-label="Close">&times;</button>

<div id="driverLicenseFrontPreview-287" style="margin-top: 1rem; width: 320px; height: 220px; border: 2px solid #ccc; border-radius: 4px; position: relative; background: url(https://media.istockphoto.com/id/1313643107/vector/top-border-banner-gradient-fade-american-flag-illustration-graphic-slide-card.jpg?s=612x612&w=0&k=20&c=PknBhiXefC3oZ14zKLyXvycpOeiuRLW8x_VUreZPKe0=), #e6f3ff; background-size: cover; background-position: center; padding: 24px; margin: 0 auto;">
                <div style="position: absolute; top: 12px; left: 12px; font-size: 1.4rem; font-weight: bold;">{{state_long}}</div>
                <div style="position: absolute; top: 60px; left: 12px; font-size: 0.9rem; font-weight: 600;">DL: E1942484</div>
                {% if license_valid %}
                <button style="position: absolute; top: 84px; left: 12px; background: transparent; border: none; cursor: pointer; padding: 0; margin: 0; width: 150px; height: 20px; z-index: 10;" id="dlExpirationTour-287"></button>
                {% endif %}
                <div style="position: absolute; top: 84px; left: 12px; font-size: 0.9rem; font-weight: 600;">EXP: {{license_expiration_date}}</div>
                
                <div style="position: absolute; bottom: 48px; left: 12px; font-size: 1.1rem; font-weight: 600;">{{courier_name}}</div>
                <div style="position: absolute; bottom: 12px; left: 12px; font-size: 0.9rem;">DOB: April 18, 1991</div>

<script>
// Add this function at the top level, before any other scripts
function toggleWinboxScroll(lock) {
    const currentWinbox = winboxes.find(wb => wb.id === 'winbox-{{ page.app.id }}');
    if (currentWinbox?.window) {
        const winboxBody = currentWinbox.window.querySelector('.wb-body');
        if (winboxBody) {
            winboxBody.style.overflow = lock ? 'hidden' : 'auto';
        }
    }
}

// Then update all modal show/hide functions to use it:
(function() {
    setTimeout(() => {
        // Get assets modal elements
        const assetsBtn = queryShadowRoot('{{ page.app_id }}', '#assets-287');
        const assetsModal = queryShadowRoot('{{ page.app_id }}', '#assets-modal-287');
        const dlModal = queryShadowRoot('{{ page.app_id }}', '#dl-modal-287');
        const assetsCloseButtons = assetsModal.querySelectorAll(':scope > .modal-container > .header > .close-modal'); // More specific selector
        const driverLicenseFrontBtn = assetsModal.querySelector('#driverLicenseFrontBtn-287');
        const dlExpirationTour = assetsModal.querySelector('#dlExpirationTour-287');
        
        function showAssetsModal() {
            assetsModal.classList.add('show');
            toggleWinboxScroll(true); // Lock scrolling
            positionModal(assetsModal);
        }

function hideAssetsModal() {
            assetsModal.classList.remove('show');
            hideDLModal(); // Hide DL modal when assets modal is closed
            toggleWinboxScroll(false); // Unlock scrolling
        }

function showDLModal() {
            dlModal.classList.add('show');
            toggleWinboxScroll(true);
            positionModal(dlModal);
        }

function hideDLModal() {
            dlModal.classList.remove('show');
            toggleWinboxScroll(false);
        }

// Event Listeners for Assets Modal
        assetsBtn.addEventListener('click', showAssetsModal);
        assetsCloseButtons.forEach(btn => btn.addEventListener('click', hideAssetsModal));
        assetsModal.querySelector('.modal-overlay').addEventListener('click', hideAssetsModal);

// Event Listeners for Driver License Modal
        driverLicenseFrontBtn?.addEventListener('click', showDLModal);
        
        // Update the DL modal close button handler
        const dlCloseButton = dlModal.querySelector('.close-modal');
        if (dlCloseButton) {
            dlCloseButton.addEventListener('click', (e) => {
                e.stopPropagation();
                hideDLModal();
            });
        }

// Update the DL modal overlay handler
        const dlOverlay = dlModal.querySelector('.modal-overlay');
        if (dlOverlay) {
            dlOverlay.addEventListener('click', (e) => {
                e.stopPropagation();
                hideDLModal();
            });
        }

// Tour button functionality
        dlExpirationTour?.addEventListener('click', function(e) {
            e.stopPropagation();
            this.style.pointerEvents = 'none';
        }, { once: true });

// Close modals on Escape key - close innermost modal first
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                if (dlModal.classList.contains('show')) {
                    hideDLModal();
                } else if (assetsModal.classList.contains('show')) {
                    hideAssetsModal();
                }
            }
        })
    }, 500);
})();

// Find and size the window
(function() { // Added IIFE wrapper
    setTimeout(() => {
        const currentWinbox = winboxes.find(wb => wb.id === 'winbox-{{ page.app.id }}');
        // Only hide on first load
        if (!window.driverProfileShown) {
            setTimeout(() => {
                currentWinbox.hide();
                window.driverProfileShown = true;
            }, 100);
        }
        if (currentWinbox) {
            currentWinbox.width = 1065;
            currentWinbox.height = 715;
            currentWinbox.resize();
            currentWinbox.setTitle('Driver Profile');
        }
    }, 500);
})(); // Corrected IIFE closing

// Update the personal info edit modal functions
(function() {
    setTimeout(() => {
        // Get modal elements using queryShadowRoot instead of querySelector
        const editButton = queryShadowRoot('{{ page.app_id }}', '#edit-button-287');
        const modal = queryShadowRoot('{{ page.app_id }}', '#edit_personal_info_modal-287');
        const modalOverlay = modal.querySelector('.modal-overlay');
        const saveButton = queryShadowRoot('{{ page.app_id }}', '#save_edit-287');
        const statusSelect = queryShadowRoot('{{ page.app_id }}', '#status-select-287');
        const scheduleBody = queryShadowRoot('{{ page.app_id }}', '.schedule-body');

// Show modal function
        function showModal() {
            modal.classList.add('show');
            toggleWinboxScroll(true);
            positionModal(modal);
        }

// Hide modal function
        function hideModal() {
            modal.classList.remove('show');
            toggleWinboxScroll(false);
        }

// Add event listeners
        editButton.addEventListener('click', showModal);
        modalOverlay.addEventListener('click', hideModal);
        saveButton.addEventListener('click', () => {
            // Update the region text when save is clicked
            const marketDropdown = modal.querySelector('select[class="info-value editable"]');
            const regionDisplay = queryShadowRoot('{{ page.app_id }}', '.driver-card p');
            const selectedMarket = marketDropdown.value;
            regionDisplay.textContent = selectedMarket;

// Check if status is "Scheduling Restricted" and clear schedule if it is
            if (statusSelect.value === 'Scheduling Restricted') {
                scheduleBody.innerHTML = `
                    {% for i in week_dates %}
                        <div class="empty-column"></div>
                    {% endfor %}
                `;
            }
            
            hideModal();
        });

// Close modal on Escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && modal.classList.contains('show')) {
                hideModal();
            }
        });
    }, 500);
})();

// Update the comment board modal functions
(function() {
    setTimeout(() => {
        // Get comment board elements
        const commentBoardBtn = queryShadowRoot('{{ page.app_id }}', '#comment-board-287');
        const commentBoardModal = queryShadowRoot('{{ page.app_id }}', '#comment-board-modal-287');
        const newCommentModal = queryShadowRoot('{{ page.app_id }}', '#new-comment-modal-287');
        const addNewBtn = queryShadowRoot('{{ page.app_id }}', '#addNewCommentBtn-287');
        const commentTable = commentBoardModal.querySelector('.table tbody');
        
        // Get form elements
        const textarea = queryShadowRoot('{{ page.app_id }}', '#commentTextarea-287');
        const areaSelect = queryShadowRoot('{{ page.app_id }}', '#commentAreaSelect-287');
        const saveBtn = queryShadowRoot('{{ page.app_id }}', '#saveCommentBtn-287');
        const cancelBtn = queryShadowRoot('{{ page.app_id }}', '#cancelCommentBtn-287');
        const closeButtons = commentBoardModal.querySelectorAll('.close-modal');

function showCommentBoard() {
            commentBoardModal.classList.add('show');
            toggleWinboxScroll(true);
            positionModal(commentBoardModal);
        }

function hideCommentBoard() {
            commentBoardModal.classList.remove('show');
            toggleWinboxScroll(false);
        }

function showNewCommentModal() {
            newCommentModal.classList.add('show');
            toggleWinboxScroll(true);
            positionModal(newCommentModal);
        }

function hideNewCommentModal() {
            newCommentModal.classList.remove('show');
            toggleWinboxScroll(false);
        }

function getCurrentDateTime() {
            const now = new Date();
            return now.toLocaleDateString('en-US', { 
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            });
        }

// Event Listeners
        commentBoardBtn.addEventListener('click', showCommentBoard);
        closeButtons.forEach(btn => btn.addEventListener('click', hideCommentBoard));
        addNewBtn.addEventListener('click', showNewCommentModal);
        cancelBtn.addEventListener('click', hideNewCommentModal);
        textarea.addEventListener('input', updateSaveButton);
        areaSelect.addEventListener('change', updateSaveButton);
        saveBtn.addEventListener('click', function() {
            if (saveBtn.classList.contains('active')) {
                addNewComment();
            }
        });

// Close modals on overlay click
        commentBoardModal.querySelector('.modal-overlay').addEventListener('click', hideCommentBoard);
        newCommentModal.querySelector('.modal-overlay').addEventListener('click', hideNewCommentModal);

// Close modals on Escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                hideCommentBoard();
                hideNewCommentModal();
            }
        });
    }, 500);
})();

// Update the task select modal functions
(function() {
    setTimeout(() => {
        // Get modal elements
        const startTaskBtn = queryShadowRoot('{{ page.app_id }}', '#start-task-287');
        const taskModal = queryShadowRoot('{{ page.app_id }}', '#task-select-modal-287');
        const taskModalOverlay = taskModal.querySelector('.modal-overlay');
        const cancelBtn = taskModal.querySelector('.cancel-btn');
        const createBtn = taskModal.querySelector('.create-btn');
        const calendarBtn = taskModal.querySelector('.calendar-button');
        const calendarDropdown = taskModal.querySelector('.calendar-dropdown');
        const dateInput = taskModal.querySelector('.date-input');
        const prevMonthBtn = taskModal.querySelector('.prev-month');
        const nextMonthBtn = taskModal.querySelector('.next-month');
        const currentMonthSpan = taskModal.querySelector('.current-month');
        const daysGrid = taskModal.querySelector('.days');

let currentDate = new Date();
        let selectedDate = null;

// Calendar functions
        function generateCalendar(date) {
            const year = date.getFullYear();
            const month = date.getMonth();
            
            // Update month/year display
            const monthNames = ["January", "February", "March", "April", "May", "June",
                              "July", "August", "September", "October", "November", "December"];
            currentMonthSpan.textContent = `${monthNames[month]} ${year}`;

// Clear previous days
            daysGrid.innerHTML = '';

// Get first day of month and total days
            const firstDay = new Date(year, month, 1).getDay();
            const daysInMonth = new Date(year, month + 1, 0).getDate();

// Add empty cells for days before first of month
            for (let i = 0; i < firstDay; i++) {
                const emptyDay = document.createElement('div');
                emptyDay.style.padding = '8px';
                emptyDay.style.textAlign = 'center';
                daysGrid.appendChild(emptyDay);
            }

// Add days of month
            for (let day = 1; day <= daysInMonth; day++) {
                const dayElement = document.createElement('div');
                dayElement.textContent = day;
                dayElement.style.padding = '8px';
                dayElement.style.textAlign = 'center';
                dayElement.style.cursor = 'pointer';
                dayElement.style.borderRadius = '4px';

// Highlight current date
                const currentDay = new Date();
                if (day === currentDay.getDate() && 
                    month === currentDay.getMonth() && 
                    year === currentDay.getFullYear()) {
                    dayElement.style.backgroundColor = '#e6f3ff';
                }

dayElement.addEventListener('mouseover', () => {
                    dayElement.style.backgroundColor = '#f0f0f0';
                });

dayElement.addEventListener('mouseout', () => {
                    if (selectedDate?.getDate() !== day || 
                        selectedDate?.getMonth() !== month || 
                        selectedDate?.getFullYear() !== year) {
                        dayElement.style.backgroundColor = '';
                    }
                });

dayElement.addEventListener('click', () => {
                    selectedDate = new Date(year, month, day);
                    dateInput.value = selectedDate.toLocaleDateString('en-US');
                    
                    // Create and dispatch input event
                    const inputEvent = new Event('input', {
                        bubbles: true,
                        cancelable: true
                    });
                    dateInput.dispatchEvent(inputEvent);
                    
                    // Create and dispatch change event
                    const changeEvent = new Event('change', {
                        bubbles: true,
                        cancelable: true
                    });
                    dateInput.dispatchEvent(changeEvent);
                    
                    calendarDropdown.style.display = 'none';
                    
                    // Update all day elements to remove previous selection
                    daysGrid.querySelectorAll('div').forEach(div => {
                        div.style.backgroundColor = '';
                    });
                    dayElement.style.backgroundColor = '#e6f3ff';
                });

daysGrid.appendChild(dayElement);
            }
        }

// Show modal function
        function showTaskModal() {
            taskModal.classList.add('show');
            toggleWinboxScroll(true); // Add this
            generateCalendar(currentDate);
            positionModal(taskModal);
        }

// Hide modal function
        function hideTaskModal() {
            taskModal.classList.remove('show');
            toggleWinboxScroll(false); // Add this
            calendarDropdown.style.display = 'none';
        }

// Calendar button click handler
        calendarBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            const modalContainer = taskModal.querySelector('.modal-container');
            
            if (calendarDropdown.style.display === 'none') {
                calendarDropdown.style.display = 'block';
                generateCalendar(currentDate);
                // Remove the minHeight setting
                modalContainer.style.height = 'fit-content';
            } else {
                calendarDropdown.style.display = 'none';
                modalContainer.style.height = 'auto';
            }
        });

// Month navigation
        prevMonthBtn.addEventListener('click', (e) => {
            e.stopPropagation(); // Add this line to prevent event bubbling
            currentDate.setMonth(currentDate.getMonth() - 1);
            generateCalendar(currentDate);
        });

nextMonthBtn.addEventListener('click', (e) => {
            e.stopPropagation(); // Add this line to prevent event bubbling
            currentDate.setMonth(currentDate.getMonth() + 1);
            generateCalendar(currentDate);
        });

// Close calendar when clicking outside
        document.addEventListener('click', (e) => {
            if (!calendarDropdown.contains(e.target) && e.target !== calendarBtn) {
                calendarDropdown.style.display = 'none';
                const modalContainer = taskModal.querySelector('.modal-container');
                modalContainer.style.height = 'auto'; // Just set height to auto
            }
        });

// Add event listeners
        startTaskBtn.addEventListener('click', showTaskModal);
        taskModalOverlay.addEventListener('click', hideTaskModal);
        cancelBtn.addEventListener('click', hideTaskModal);
        createBtn.addEventListener('click', () => {
            const taskSelect = taskModal.querySelector('.task-select');
            if (taskSelect.value && dateInput.value) {
                hideTaskModal();
                toggleWinboxScroll(false); // Add this
            }
        });

// Close modal on Escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && taskModal.classList.contains('show')) {
                hideTaskModal();
            }
        });
    }, 500);
})();

// Add this function to handle modal positioning
function positionModal(modal) {
    const currentWinbox = winboxes.find(wb => wb.id === 'winbox-{{ page.app.id }}');
    if (currentWinbox?.window) {
        const winboxBody = currentWinbox.window.querySelector('.wb-body');
        const winboxRect = winboxBody.getBoundingClientRect();
        const scrollTop = winboxBody.scrollTop;
        
        // Position modal container relative to visible winbox area
        const modalContainer = modal.querySelector('.modal-container');
        if (modalContainer) {
            modalContainer.style.top = `${scrollTop + (winboxRect.height / 2)}px`;
            modalContainer.style.left = '50%';
            modalContainer.style.transform = 'translate(-50%, -50%)';
        }

// Position the overlay to cover the visible area
        const modalOverlay = modal.querySelector('.modal-overlay');
        if (modalOverlay) {
            modalOverlay.style.top = `${scrollTop}px`;
            modalOverlay.style.height = `${winboxRect.height}px`;
        }
    }
}

// Update showTaskModal to use the new positioning
function showTaskModal() {
    taskModal.classList.add('show');
    toggleWinboxScroll(true);
    generateCalendar(currentDate);
    
    const modalContainer = taskModal.querySelector('.modal-container');
    positionModal(modalContainer);
}
</script>

Name:

App:

Grubhub Driver Profile (2)

Grade Links/Prompts - {systems_history} is available as a template variable (lowercase even though this shows as uppercase 🤪)

	Element id	Generic app	Delete?

Page links

	Swap delay	To page	Element id	Generic app	Delete?
		-		-

Delete

Django administration

Change application page

ApplicationPage object (7)

Grade Links/Prompts - {systems_history} is available as a template variable (lowercase even though this shows as uppercase 🤪)

Page links