/* Workshop History - Session cards and Filter bar */

/* Main container layout */
.wat-workshop-history-container { display: flex; gap: 16px; align-items: flex-start; }
.wat-course-list { flex: 1 1 60%; min-width: 0; }
.wat-detail-panel { flex: 1 1 40%; }
.wat-detail-panel .wat-detail-panel-content { position: sticky; top: 80px; }

/* Session cards */
.wat-course { margin-bottom: 20px; }
.wat-sessions { margin-top: 15px; padding-left: 20px; border-left: 3px solid #FBBF59; }
.wat-session { margin-bottom: 10px; }
.wat-session-card { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
.wat-session-header { display: flex; align-items: center; gap: 10px; }
.wat-session-title { margin: 0; font-size: 14px; font-weight: 600; }
.wat-session-meta { color: #6b7280; font-size: 12px; display: flex; gap: 8px; }
.wat-session-status { display: flex; align-items: center; gap: 8px; }
.wat-status-badge { padding: 4px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.wat-status-badge.completed { background: #e6f4ea; color: #1e7e34; }
.wat-status-badge.pending { background: #fff7e6; color: #b26a00; }
.wat-status-badge.not-completed { background: #f1f5f9; color: #475569; }
.wat-certificate-badge { padding: 2px 6px; border-radius: 4px; background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 600; }

/* History header - 2 columns (55% left, 45% right) */
.wat-history-header { display: flex; align-items: center; margin: 8px 0 16px 0; gap: 12px; padding: 30px 0 30px; }
.wat-history-header-left { flex: 0 0 60%; display: flex; align-items: center; gap: 16px; }
.wat-history-header-right { flex: 0 0 40%; }
.wat-history-header-left .wat-workshop-history-title { 
    margin: 0 !important; 
    flex: 1; 
    display: flex; 
    align-items: center;
    line-height: 1.2;
}
.wat-sort-container { 
    min-width: 160px; 
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wat-sort-wrapper {
    position: relative;
    width: 100%;
}
.wat-sort-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
}
/* Sort dropdown specific styling */
#wat-sort-order {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #FBBF59;
    font-size: 14px;
    vertical-align: middle;
    text-align: center;
}
.wat-history-header-left .wat-filter-select {
    vertical-align: middle;
}

/* Filter bar */
.wat-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 6px 0; }
.wat-filter-dropdown { position: relative; }
.wat-filter-select, .wat-filter-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 36px 10px 12px; font-size: 13px; color: #0f172a; min-width: 160px; }
.wat-dropdown-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; width: 16px; height: 16px; }
.wat-reset-icon { width: 40px; height: 40px; }