/* ========== UTILITY COMPONENTS ========== */

/* Collapsible Sections */
.collapsible-header {
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
    margin: calc(var(--space-sm) * -1);
}

.collapsible-header:hover {
    background-color: var(--gray-50);
}

.section-body {
    transition: all var(--transition-normal);
    overflow: hidden;
}

.section-body:not([style*="display: none"]) {
    animation: expandSection 0.3s ease-out;
}

@keyframes expandSection {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* Time Display Improvements */
.datetime-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.date-part {
    font-weight: 600;
    color: var(--text-primary);
}

.due-date {
    color: var(--warning);
    font-weight: 700;
}

.time-part {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.time-12h {
    font-family: 'Tajawal', sans-serif;
}

/* Task Posted Indicator */
.task-posted-indicator {
    display: inline-block;
    margin-right: var(--space-sm);
    color: var(--info);
    font-size: var(--font-size-sm);
    cursor: help;
}

/* Customer Sections */
.customers-section {
    margin-bottom: var(--space-2xl);
}

.customers-section:last-child {
    margin-bottom: 0;
}

.section-divider {
    height: 2px;
    background: var(--gray-200);
    margin: var(--space-2xl) 0;
}

/* Customer Info */
.customer-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Custom Scrollbar Styling */
.admin-table::-webkit-scrollbar {
    width: 8px;
}

.admin-table::-webkit-scrollbar-track {
    background: var(--gray-100);
}

.admin-table::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 4px;
}

.admin-table::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}