/* ========================================
   Hours Report - דיווח שעות רכזים
   ======================================== */

.hr-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.hr-tab {
    padding: 0.6rem 1.2rem;
    border: none;
    background: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.hr-tab.active {
    color: var(--text);
    border-bottom-color: #006838;
}

.hr-closure-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.hr-closure-open {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}

.hr-closure-closed {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.hr-closure-approved {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.hr-closure-note {
    width: 100%;
    font-size: 0.8rem;
    color: var(--text3);
}

/* .btn:disabled (common.css) sets cursor:not-allowed correctly, but its opacity gets
   overridden somewhere else in the cascade for .btn-primary specifically — forcing it here
   so a locked add/save button is visibly, not just functionally, disabled (per Ortal,
   2026-08-19 — matches the "no entry" cursor convention already used elsewhere in the app). */
#hefSubmitBtn:disabled,
#eefSubmitBtn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.hours-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.hours-program-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hours-program-select label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
}

/* Finished-programs toggle — excluded from the picker by default so old, wrapped-up
   programs don't clutter the search (per Ortal, 2026-08-10); still reachable via this. */
.hr-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text2);
    cursor: pointer;
    white-space: nowrap;
}

.hrs-select-wrapper {
    position: relative;
    min-width: 350px;
}

.hrs-select-wrapper input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    background: white;
    color: var(--text);
    box-sizing: border-box;
}

.hrs-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 250px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
}

.hrs-dropdown-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.hrs-dropdown-item:hover {
    background: #e0f2fe;
}

.hrs-dropdown-item:last-child {
    border-bottom: none;
}

/* Summary cards */
.hours-summary {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    min-width: 80px;
}

.summary-label {
    font-size: 0.7rem;
    color: var(--text3);
    margin-bottom: 2px;
}

.summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* Entry form — one clear record at a time, big touch targets for mobile */
.hours-entry-form {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.hef-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.hef-wide {
    grid-column: 1 / -1;
}

.hef-toggle {
    margin-top: 0.75rem;
    padding: 0.3rem 0;
    background: none;
    border: none;
    color: var(--blue);
    font-size: 0.8rem;
    cursor: pointer;
}

.hef-secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 220px));
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
    opacity: 0.85;
}

.hef-secondary .form-input {
    font-size: 0.85rem;
}

.hef-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.hef-actions .btn {
    min-height: 44px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Entry list — compact read-only cards instead of a dense spreadsheet grid */
.hours-entry-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* clearance so the last card's action buttons (bottom-left in RTL) never sit behind
       the fixed AI chat widget (#aiChatWidget, bottom-left, 56px, z-index 9999) */
    padding-bottom: 5rem;
}

.hours-entry-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-wrap: wrap;
}

.hours-entry-card.hec-editing {
    border-color: var(--blue);
    background: rgba(59, 130, 246, 0.06);
}

.hec-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

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

.hec-component {
    font-weight: 600;
}

.hec-hours {
    color: var(--text2);
}

.hec-desc {
    color: var(--text3);
    font-size: 0.85rem;
    flex-basis: 100%;
}

.hec-actions {
    display: flex;
    gap: 0.4rem;
}

/* Read-only rows sourced from a program manager's personal hours report — see
   js/hours-report.js renderEntryList(); no edit/delete actions on these. */
.hec-readonly {
    opacity: 0.85;
    background: var(--bg2, #f1f5f9);
}

.hec-tag {
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: var(--blue);
    white-space: nowrap;
}

/* Empty state */
.hours-empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text3);
    font-size: 1rem;
}

.hr-pending-for-me {
    max-width: 500px;
    margin: 1.5rem auto 0;
    text-align: right;
}

.hr-pending-loading {
    color: var(--text3);
    font-size: 0.85rem;
}

.hr-pending-empty {
    color: #047857;
    font-size: 0.9rem;
}

.hr-pending-title {
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: #b45309;
}

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

.hr-pending-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background: white;
}

.hr-pending-item:hover {
    background: #fffbeb;
    border-color: #f59e0b;
}

.hr-pending-program {
    font-weight: 600;
}

.hr-pending-coord {
    color: var(--text3);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .hours-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .hours-program-select {
        flex-direction: column;
        align-items: stretch;
    }
    .hours-program-select select,
    .hrs-select-wrapper {
        min-width: unset;
        width: 100%;
    }
    .hef-grid {
        grid-template-columns: 1fr;
    }
    .hef-actions .btn {
        flex: 1;
    }
    .hours-entry-card {
        flex-direction: column;
        align-items: stretch;
    }
    .hec-actions {
        justify-content: flex-end;
    }
}