/**
 * casual-entry-modal.css
 * Unique styles for the Edit Casual Entry modal
 * Base modal styles inherited from /styles/modals/modal-base.css
 */

@import url('../../../styles/base/design-tokens.css');

/* Modal Size */
#edit-casual-entry-modal .modal-content {
    max-width: 500px;
}

/* Student Info Card */
.student-info-card {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border-left: 4px solid var(--purple-primary);
    border-radius: var(--radius-sm);
}

.student-info-card h4 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.student-info-card p {
    margin: 0;
    font-size: 0.9rem;
}

/* Date Picker Styling */
#casual-entry-date-picker {
    background: var(--background-color);
    border: 1px solid var(--purple-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) 12px;
    font-size: 0.95rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Style the calendar icon */
#casual-entry-date-picker::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(28%) sepia(89%) saturate(3207%) hue-rotate(262deg) brightness(85%) contrast(95%);
}

#casual-entry-date-picker:hover {
    border-color: var(--purple-primary);
    color: var(--text-primary);
    background: var(--bg-purple-light);
}

#casual-entry-date-picker:focus {
    outline: none;
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px var(--bg-purple-light);
    color: var(--text-primary);
}