/* ========================================
   GreenStep Hub - Onboarding System
   ======================================== */

/* Bulk Actions Bar */
.coord-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border: 1px solid #86efac;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

.coord-bulk-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #166534;
}

.coord-bulk-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.coord-bulk-bar .btn-whatsapp {
    background: #25D366;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s;
}

.coord-bulk-bar .btn-whatsapp:hover:not(:disabled) {
    background: #1da851;
}

.coord-bulk-bar .btn-whatsapp:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Onboarding Filter Buttons - Smaller size */
#onboardingSystem .btn-show,
#onboardingSystem .btn-reset {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 6px;
}

/* Contract warning filter button */
.btn-warning-filter {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}

.btn-warning-filter:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

.btn-warning-filter.active {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

#onboardingSystem .filter-input,
#onboardingSystem .filter-select {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    height: auto;
}

/* Onboarding Header Bar - Single Row */
.onboarding-header-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--card);
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border);
    flex-wrap: wrap;
}

.header-title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-title-section h1 {
    margin: 0;
    font-size: 1.5rem;
    white-space: nowrap;
}

.header-filters-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.header-filters-section .filter-input {
    min-width: 180px;
    padding: 0.5rem 1rem;
}

.header-filters-section .filter-select {
    min-width: 140px;
    padding: 0.5rem 1rem;
}

.header-actions-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
}

/* Onboarding Stats Bar - Compact */
.onboarding-stats-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid #d1fae5;
}

.onboarding-stats-bar .stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.onboarding-stats-bar .stat-number {
    font-size: 1.3rem;
    font-weight: 700;
}

.onboarding-stats-bar .stat-number.blue { color: var(--blue); }
.onboarding-stats-bar .stat-number.green { color: var(--green); }
.onboarding-stats-bar .stat-number.orange { color: #f59e0b; }
.onboarding-stats-bar .stat-number.purple { color: #8b5cf6; }

.onboarding-stats-bar .stat-text {
    font-size: 0.85rem;
    color: var(--text3);
}

.onboarding-stats-bar .results-count {
    margin-right: auto;
    padding: 0.4rem 1rem;
    background: var(--card);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text2);
    border: 1px solid var(--border);
}

.onboarding-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.onboarding-table th {
    background: #cbd5e1;
    color: var(--text);
    font-weight: 600;
    padding: 0.3rem 0.4rem;
    text-align: right;
    font-size: 0.7rem;
    border-bottom: 1px solid #94a3b8;
    white-space: nowrap;
}

.onboarding-table td {
    padding: 0.25rem 0.4rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
}

.onboarding-table tbody tr {
    background: #eef2f7;
}

.onboarding-table tbody tr:nth-child(even) {
    background: #e2e8f0;
}

.onboarding-table tbody tr:hover {
    background: #e2e8f0;
    transition: background 0.2s ease;
}

.coord-name {
    font-weight: 600;
    color: var(--text);
}

.coord-phone {
    color: var(--text3);
    font-size: 0.8rem;
}

.progress-bar-container {
    width: 100%;
    height: 20px;
    background: var(--bg2);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green), #059669);
    transition: width 0.3s ease;
    border-radius: 10px;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text);
}

.checklist-preview {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.checklist-item-mini {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.2s;
}

.checklist-item-mini.completed {
    background: var(--green);
}

.view-details-btn {
    background: var(--blue);
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.view-details-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

/* Onboarding Modal */
.onboarding-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.onboarding-section {
    background: var(--bg2);
    border-radius: 12px;
    padding: 1.25rem;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text);
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem;
    background: var(--card);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.checklist-item:hover {
    background: var(--bg);
}

.checklist-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg2);
    transition: all 0.2s;
    flex-shrink: 0;
}

.checklist-checkbox.checked {
    background: var(--green);
    border-color: var(--green);
}

.checklist-checkbox svg {
    width: 14px;
    height: 14px;
    color: white;
    opacity: 0;
}

.checklist-checkbox.checked svg {
    opacity: 1;
}

.checklist-label {
    font-size: 0.85rem;
    color: var(--text2);
}

.checklist-item.checked .checklist-label {
    color: var(--text);
    font-weight: 500;
}

/* Programs Section */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.program-card {
    background: var(--card);
    border-radius: 10px;
    padding: 1rem;
    border-right: 3px solid var(--border);
}

.program-card.has-program {
    border-right-color: var(--green);
}

.program-number {
    font-size: 0.75rem;
    color: var(--text3);
    margin-bottom: 0.5rem;
}

.program-select {
    width: 100%;
    padding: 0.6rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.status-select {
    width: 100%;
    padding: 0.5rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.8rem;
}

/* Coordinator Details */
.coord-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.75rem;
    color: var(--text3);
    font-weight: 600;
}

.info-value {
    font-size: 0.9rem;
    color: var(--text);
}

/* Attendance Section */
.attendance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.attendance-stat {
    background: var(--card);
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
}

.attendance-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--green);
}

.attendance-stat-label {
    font-size: 0.8rem;
    color: var(--text3);
    margin-top: 0.25rem;
}

/* ========================================
   Expandable Rows & Tabs System
   ======================================== */

/* Main Row - Clickable */
.main-row {
    cursor: pointer;
    transition: all 0.2s;
}

.main-row:hover {
    background: var(--bg) !important;
}

.main-row.expanded {
    background: var(--bg2);
    border-bottom: none;
}

.main-row.expanded td {
    border-bottom: none;
}

/* Action buttons in coordinator rows */
.main-row .btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s;
    opacity: 0.7;
    position: relative;
    z-index: 2;
}

.main-row .btn-icon:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
    transform: scale(1.15);
}

.expand-icon {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    color: var(--text3);
    transition: transform 0.2s;
}

/* Expanded Row */
.expanded-row {
    background: var(--bg2);
}

.expanded-row td {
    padding: 0 !important;
    border-bottom: 2px solid var(--border);
}

.expanded-content {
    padding: 1rem 1.5rem 1.5rem;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tabs Navigation */
.coord-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.coord-tab {
    padding: 0.6rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--text3);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
    font-family: inherit;
}

.coord-tab:hover {
    background: var(--card);
    color: var(--text);
}

.coord-tab.active {
    background: var(--card);
    color: var(--blue);
    border-bottom: 3px solid var(--blue);
}

/* Tab Content */
.tab-content {
    background: var(--card);
    border-radius: 12px;
    padding: 1.25rem;
    min-height: 200px;
}

/* Personal Info Grid */
.personal-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem;
    background: var(--bg);
    border-radius: 10px;
    transition: all 0.2s;
}

.info-card:hover {
    background: var(--bg2);
    transform: translateY(-2px);
}

.info-icon {
    font-size: 1.3rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border-radius: 8px;
}

.info-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.info-details .info-label {
    font-size: 0.7rem;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-details .info-value {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
}

.notes-box {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg);
    border-radius: 8px;
    border-right: 3px solid var(--orange);
    font-size: 0.85rem;
    color: var(--text2);
}

/* Editable Personal Info Cards */
.info-card-edit {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem;
    background: var(--bg);
    border-radius: 10px;
    transition: all 0.2s;
}

.info-card-edit:hover {
    background: var(--bg2);
}

.info-card-edit .info-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.info-card-edit .info-label {
    font-size: 0.7rem;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-input {
    width: 100%;
    padding: 0.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text);
    transition: all 0.2s;
}

.info-input:focus {
    outline: none;
    border-color: var(--blue);
    background: white;
}

.info-input:hover {
    border-color: var(--blue);
}

.notes-section {
    margin-top: 1rem;
}

.notes-section .info-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text3);
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.notes-input {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text);
    resize: vertical;
    transition: all 0.2s;
}

.notes-input:focus {
    outline: none;
    border-color: var(--blue);
    background: white;
}

/* Checklist Tab */
.checklist-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.mini-progress {
    flex: 1;
    max-width: 200px;
    height: 8px;
    background: var(--bg2);
    border-radius: 4px;
    overflow: hidden;
}

.mini-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green), #059669);
    transition: width 0.3s ease;
}

.percent-badge {
    background: var(--green);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.checklist-card {
    background: var(--bg);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border-right: 3px solid var(--border);
    transition: all 0.2s;
}

.checklist-card.completed {
    border-right-color: var(--green);
    background: rgba(16, 185, 129, 0.05);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
    cursor: pointer;
}

.checkbox-custom {
    display: none;
}

.checkbox-text {
    font-size: 0.85rem;
    color: var(--text2);
}

.checklist-card.completed .checkbox-text {
    color: var(--text);
    font-weight: 500;
}

/* Assignment Tab */
.assignment-section {
    margin-bottom: 1.5rem;
}

.assignment-section h4,
.programs-section h4 {
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.assignment-month {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.2s;
}

.assignment-month.has-programs {
    border-color: var(--green);
    background: rgba(16, 185, 129, 0.03);
}

.assignment-month.expanded {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.month-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.month-header:hover {
    background: var(--bg2);
}

.month-expand-icon {
    font-size: 0.65rem;
    color: var(--text3);
    transition: transform 0.2s;
    width: 12px;
    text-align: center;
}

.assignment-month.expanded .month-expand-icon {
    color: var(--blue);
}

.month-label {
    font-size: 0.8rem;
    color: var(--text);
    font-weight: 600;
    flex: 1;
}

.month-selected-count {
    font-size: 0.7rem;
    background: var(--green);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.month-no-selection {
    font-size: 0.7rem;
    color: var(--text3);
    font-style: italic;
}

.month-input {
    padding: 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--text);
    transition: all 0.2s;
}

.month-input:focus {
    outline: none;
    border-color: var(--blue);
    background: white;
}

/* Program checkboxes for assignments */
.program-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.8rem 0.8rem;
    background: var(--card);
    border-top: 1px solid var(--border);
    max-height: 200px;
    overflow-y: auto;
}

.program-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.program-checkbox-label:hover {
    background: var(--bg2);
}

.program-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--green);
    cursor: pointer;
    flex-shrink: 0;
}

.program-checkbox-text {
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.2;
}

.program-checkbox-label input[type="checkbox"]:checked + .program-checkbox-text {
    color: var(--green);
    font-weight: 600;
}

.no-programs-available {
    font-size: 0.8rem;
    color: var(--text3);
    font-style: italic;
    padding: 0.5rem;
    text-align: center;
}

.selected-programs-display {
    margin-top: 0.4rem;
    padding: 0.4rem;
    background: var(--bg2);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text2);
    min-height: 1.5em;
    line-height: 1.4;
}

.selected-programs-display .no-selection {
    color: var(--text3);
    font-style: italic;
}

.assignment-hint {
    font-size: 0.8rem;
    color: var(--text3);
    margin-bottom: 0.75rem;
    font-style: italic;
}

.programs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.program-tag {
    background: var(--blue);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.no-programs {
    color: var(--text3);
    font-size: 0.85rem;
    font-style: italic;
}

/* Evaluation Tab */
.evaluation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.eval-card {
    background: var(--bg);
    border-radius: 10px;
    padding: 1rem;
    border-right: 3px solid var(--border);
    transition: all 0.2s;
}

.eval-card.has-value {
    border-right-color: var(--purple);
}

.eval-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.eval-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.eval-status {
    font-size: 0.9rem;
    color: var(--text3);
}

.eval-card.has-value .eval-status {
    color: var(--green);
}

.eval-input {
    width: 100%;
    min-height: 60px;
    padding: 0.6rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text);
    resize: vertical;
    transition: all 0.2s;
}

.eval-input:focus {
    outline: none;
    border-color: var(--blue);
}

.overall-score-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.overall-score-section label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.score-input {
    width: 80px;
    padding: 0.6rem;
    background: var(--bg);
    border: 2px solid var(--purple);
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    color: var(--purple);
    font-family: inherit;
}

.score-input:focus {
    outline: none;
    background: white;
}

/* ========================================
   Documents Tab
   ======================================== */

.documents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.documents-header span {
    font-size: 0.9rem;
    color: var(--text2);
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.document-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg);
    border-radius: 10px;
    border-right: 3px solid var(--border);
    transition: all 0.2s;
}

.document-card:hover {
    background: var(--bg2);
    transform: translateY(-2px);
}

.document-card.has-document {
    border-right-color: var(--green);
    background: rgba(16, 185, 129, 0.05);
}

.document-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border-radius: 10px;
}

.document-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.document-label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
}

.document-filename {
    font-size: 0.8rem;
    color: var(--blue);
    text-decoration: underline;
    cursor: pointer;
}

.document-date {
    font-size: 0.7rem;
    color: var(--text3);
}

.document-status {
    font-size: 0.8rem;
    color: var(--text3);
    font-style: italic;
}

.document-actions {
    display: flex;
    gap: 0.5rem;
}

.document-actions .btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.document-actions .btn-icon:hover {
    background: var(--blue);
    color: white;
    transform: scale(1.1);
}

.upload-btn:hover {
    background: var(--green) !important;
}

.documents-list-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.documents-list-section h4 {
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 1rem;
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.document-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--bg);
    border-radius: 8px;
    transition: all 0.2s;
}

.document-list-item:hover {
    background: var(--bg2);
}

.document-list-item .doc-icon {
    font-size: 1.2rem;
}

.document-list-item .doc-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
}

.document-list-item .doc-type {
    font-size: 0.75rem;
    color: var(--text3);
    background: var(--card);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.document-list-item .doc-date {
    font-size: 0.75rem;
    color: var(--text3);
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .coord-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .coord-tab {
        white-space: nowrap;
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    .personal-info-grid,
    .checklist-grid,
    .months-grid,
    .evaluation-grid,
    .documents-grid {
        grid-template-columns: 1fr;
    }

    .expanded-content {
        padding: 0.75rem;
    }

    .tab-content {
        padding: 1rem;
    }
}

/* ========================================
   Employment Continuity
   ======================================== */

/* Continuity Cell in Table */
.continuity-cell {
    cursor: pointer;
    transition: all 0.2s;
}

.continuity-cell:hover {
    transform: scale(1.02);
}

.continuity-bar-container {
    width: 100%;
    height: 24px;
    background: var(--bg2);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-width: 80px;
}

.continuity-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 12px;
}

.continuity-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
}

/* Assignments Modal */
.continuity-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.continuity-label {
    font-size: 0.9rem;
    color: var(--text2);
}

.continuity-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.assignments-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.assignment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border-radius: 8px;
    border-right: 3px solid var(--green);
    transition: all 0.2s;
}

.assignment-item:hover {
    background: var(--bg2);
}

.assignment-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.assignment-info strong {
    color: var(--text);
    font-size: 0.9rem;
}

.assignment-dates {
    font-size: 0.8rem;
    color: var(--text3);
}

.delete-assignment {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.assignment-item:hover .delete-assignment {
    opacity: 1;
}

/* Expanded row colspan fix */
.expanded-row td[colspan] {
    padding: 0 !important;
}

/* Phone Validation Styles */
.input-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.input-valid {
    border-color: #22c55e !important;
    background-color: #f0fdf4 !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}

.phone-error {
    display: block;
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    min-height: 1rem;
}

button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   Work Days Selection
   ======================================== */
.work-days-container {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.work-day-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.work-day-checkbox input[type="checkbox"] {
    display: none;
}

.work-day-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text2);
    background: var(--bg);
    transition: all 0.2s ease;
}

.work-day-checkbox input[type="checkbox"]:checked + .work-day-label {
    background: var(--green);
    border-color: var(--green);
    color: white;
}

.work-day-checkbox:hover .work-day-label {
    border-color: var(--green);
    background: rgba(16, 185, 129, 0.1);
}

/* Info card wide variant for work days */
.info-card-edit.wide {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .info-card-edit.wide {
        grid-column: span 1;
    }
}

/* ========================================
   Salary Input with Suffix
   ======================================== */
.salary-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.salary-input {
    flex: 1;
    text-align: left;
    direction: ltr;
}

.salary-input::-webkit-inner-spin-button,
.salary-input::-webkit-outer-spin-button {
    opacity: 1;
}

.salary-suffix {
    font-size: 0.8rem;
    color: var(--text3);
    white-space: nowrap;
}

/* View Tabs (Active/Archive) */
.view-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
    background: var(--bg2);
    border-radius: 8px;
    width: fit-content;
}

.view-tab {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text2);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.view-tab:hover {
    background: var(--bg);
    color: var(--text);
}

.view-tab.active {
    background: var(--blue);
    color: white;
}

/* ========================================
   Program Types Multi-Select
   ======================================== */

/* Wide card for program types */
.info-card-edit.info-card-wide {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .info-card-edit.info-card-wide {
        grid-column: span 1;
    }
}

.program-types-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.program-types-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.program-type-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.program-type-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--green);
    cursor: pointer;
}

.program-type-label {
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
    padding: 0.3rem 0.6rem;
    background: var(--bg);
    border-radius: 4px;
    transition: all 0.2s;
}

.program-type-checkbox:hover .program-type-label {
    background: var(--bg2);
}

.program-type-checkbox input[type="checkbox"]:checked + .program-type-label {
    background: rgba(16, 185, 129, 0.15);
    color: var(--green);
    font-weight: 600;
}

.program-types-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.program-types-custom .program-type-checkbox {
    flex-shrink: 0;
}

.custom-type-input {
    flex: 1;
    min-width: 150px;
    max-width: 250px;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
}

.custom-type-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg2) !important;
}

/* ========================================
   Training Program Section (in Checklist)
   ======================================== */
.training-program-section {
    margin-top: 1.5rem;
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.training-program-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.training-program-header:hover {
    background: var(--bg2);
}

.training-expand-icon {
    font-size: 0.7rem;
    color: var(--text3);
    width: 14px;
    text-align: center;
    transition: transform 0.2s;
}

.training-program-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.training-program-body {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--border);
}

/* ========================================
   Program Assignment - New Date Range UI
   ======================================== */

.add-assignment-form {
    background: var(--bg);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px dashed var(--border);
}

.add-assignment-form .form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.add-assignment-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 140px;
}

.add-assignment-form .form-group label {
    font-size: 0.75rem;
    color: var(--text3);
    font-weight: 600;
}

.assignment-select,
.assignment-date {
    padding: 0.6rem 0.8rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text);
    transition: all 0.2s;
}

.assignment-select:focus,
.assignment-date:focus {
    outline: none;
    border-color: var(--blue);
    background: white;
}

.btn-add-assignment {
    padding: 0.6rem 1.2rem !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Program Assignment Cards */
.program-assignment-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: var(--bg);
    border-radius: 8px;
    border-right: 3px solid var(--green);
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}

.program-assignment-card:hover {
    background: var(--bg2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.assignment-program-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    flex: 1;
}

.assignment-dates {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text2);
    background: var(--card);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
}

.assignment-dates .date-label {
    color: var(--text3);
    font-weight: 500;
}

.assignment-dates .date-separator {
    color: var(--text3);
    margin: 0 0.25rem;
}

.delete-assignment {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 4px;
    transition: all 0.2s;
    opacity: 0.5;
}

.program-assignment-card:hover .delete-assignment {
    opacity: 1;
}

.delete-assignment:hover {
    background: #fef2f2;
    transform: scale(1.1);
}

.no-assignments-msg {
    text-align: center;
    color: var(--text3);
    padding: 1.5rem;
    font-style: italic;
    background: var(--bg);
    border-radius: 8px;
    margin: 0;
}

/* Assignment input (for text input with datalist) */
.assignment-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--bg2);
    color: var(--text);
    width: 100%;
    transition: all 0.2s;
}

.assignment-input:focus {
    outline: none;
    border-color: var(--blue);
    background: white;
}

.assignment-input::placeholder {
    color: var(--text3);
}

/* Assignment details (classes and hours) */
.assignment-details {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.assignment-detail {
    font-size: 0.75rem;
    color: var(--text2);
    background: rgba(59, 130, 246, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .add-assignment-form .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .add-assignment-form .form-group {
        min-width: 100%;
    }

    .btn-add-assignment {
        width: 100%;
        margin-top: 0.5rem;
    }

    .program-assignment-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .assignment-dates {
        width: 100%;
        justify-content: center;
    }
}