/*
 * TimeSpy – employees
 * Teil der aufgeteilten timespy.css (siehe base.css für Variablen).
 * Reihenfolge der <link>-Tags in layout.php/login.php ist wichtig
 * und entspricht exakt der ursprünglichen Reihenfolge in dieser Datei.
 */

/* =========================================================
   EMPLOYEE DETAIL
   ========================================================= */

.employee-detail-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 18px;
}

.employee-detail-hero {
    padding: 26px 28px;
}

.employee-detail-identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.employee-detail-avatar {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 18px;

    color: var(--accent);
    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.12),
            rgba(124,58,237,.12)
        );

    font-size: 1rem;
    font-weight: 750;
}

.employee-detail-avatar--photo {
    object-fit: cover;
    background: var(--bg-solid);
}

.employee-detail-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: var(--text-muted);

    font-size: .68rem;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.employee-detail-hero h2 {
    margin: 0;

    font-size: 1.8rem;
    font-weight: 650;

    letter-spacing: -.04em;
}

.employee-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 10px;
}

.employee-detail-meta span {
    padding: 5px 9px;

    color: var(--text-secondary);

    background: rgba(0,0,0,.035);

    border-radius: 999px;

    font-size: .72rem;
}

.employee-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 16px;

    margin-top: 16px;
}

.employee-detail-card {
    padding: 22px;
}

.employee-detail-card-header h3 {
    margin: 0;

    font-size: 1.05rem;
    font-weight: 650;

    letter-spacing: -.02em;
}

.employee-detail-list {
    display: flex;
    flex-direction: column;

    gap: 14px;

    margin-top: 20px;
}

.employee-detail-list > div {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding-bottom: 14px;

    border-bottom:
        1px solid var(--border);
}

.employee-detail-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.employee-detail-list span {
    color: var(--text-muted);

    font-size: .72rem;
}

.employee-detail-list strong {
    font-size: .9rem;
    font-weight: 620;
}

@media (max-width: 1000px) {

    .employee-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* -------------------------------------------------------
   Kompaktes Kennzahlen-Grid (z.B. Ferienübersicht)

   Ersetzt eine lange einspaltige Liste durch ein
   mehrspaltiges Raster, damit einzelne Karten nicht
   unverhältnismässig lang werden und die Kartenhöhen im
   employee-detail-grid ausgeglichener bleiben.
   ------------------------------------------------------- */

.employee-vacation-overview {
    margin-top: 20px;
}

.employee-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;
}

.employee-stat-grid > div {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding-bottom: 14px;

    border-bottom:
        1px solid var(--border);
}

.employee-stat-grid span {
    color: var(--text-muted);

    font-size: .7rem;
}

.employee-stat-grid strong {
    font-size: .86rem;
    font-weight: 620;

    line-height: 1.3;
}

@media (max-width: 640px) {

    .employee-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

.employee-vacation-balance-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 16px;
    padding: 14px 16px;

    border-radius: var(--radius-md);

    background: var(--accent-soft);
}

.employee-vacation-balance-total span {
    color: var(--text-secondary);

    font-size: .78rem;
    font-weight: 560;
}

.employee-vacation-balance-total strong {
    font-size: 1.05rem;
    font-weight: 700;

    color: var(--accent);
}

.employee-vacation-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 14px;

    font-size: .82rem;
}

.employee-vacation-status-row span {
    color: var(--text-muted);
}

.employee-vacation-close {
    margin-top: 14px;
}

.employee-access-edit-hint {
    margin: 16px 0;
}

.reset-link-box {
    margin-top: 16px;
}

.employee-access-edit-trigger {
    margin-top: 16px;
}

.access-status-toggle {
    display: inline-flex;
    vertical-align: middle;
}

.access-status-toggle-label {
    display: inline-block;
    vertical-align: middle;

    margin-left: 10px;

    font-size: .86rem;
    font-weight: 560;
}

.access-form-grid {
    margin-top: 18px;
}

.wizard-page {
    max-width: 640px;
}

.wizard-card {
    margin-top: 24px;
}

.wizard-progress {
    display: flex;
    justify-content: space-between;

    gap: 8px;
}

.wizard-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 6px;

    flex: 1;

    opacity: .45;
}

.wizard-progress-step.is-active,
.wizard-progress-step.is-done {
    opacity: 1;
}

.wizard-progress-dot {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--bg-solid);
    border: 2px solid var(--border);

    font-size: .78rem;
    font-weight: 700;
}

.wizard-progress-step.is-active
.wizard-progress-dot {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.wizard-progress-step.is-done
.wizard-progress-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.wizard-progress-label {
    font-size: .72rem;
    font-weight: 600;

    text-align: center;
}

.wizard-access-toggle {
    display: inline-flex;
    vertical-align: middle;
}

.wizard-access-toggle-label {
    display: inline-block;
    vertical-align: middle;

    margin-left: 10px;

    font-size: .86rem;
    font-weight: 560;
}

.wizard-access-fields {
    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid var(--border);
}

/*
 * Wochentag-Verteilung: verwendet sowohl im Mitarbeiter-
 * Assistenten (Schritt 3, Arbeitszeit) als auch bei
 * "Änderung planen" bei Pensumwechsel.
 */
.wizard-distribute-row {
    display: flex;
    align-items: flex-end;

    gap: 12px;

    margin: 18px 0;

    padding: 14px;

    background: var(--bg-solid);
    border-radius: 10px;
}

.wizard-distribute-row > div {
    flex: 1;
}

.wizard-info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    margin-left: 4px;

    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-solid);

    font-size: .68rem;
    font-weight: 700;
    font-style: italic;
    color: var(--text-secondary);

    cursor: pointer;
}

.wizard-info-trigger:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.wizard-info-panel {
    margin-top: 8px;
    padding: 12px 14px;

    background: var(--accent-soft);
    border-radius: 10px;

    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.wizard-info-panel strong {
    display: block;
    margin-top: 8px;

    color: var(--text-primary);
}

.wizard-info-panel strong:first-child {
    margin-top: 0;
}

.employee-photo-dropzone {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 14px;

    border: 1.5px dashed var(--border);
    border-radius: 16px;

    cursor: pointer;

    transition:
        border-color var(--transition),
        background var(--transition);
}

.employee-photo-dropzone:hover,
.employee-photo-dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.employee-photo-preview-wrap {
    position: relative;

    width: 88px;
    height: 88px;

    flex-shrink: 0;

    border-radius: 50%;

    overflow: hidden;
}

.employee-photo-preview {
    width: 88px;
    height: 88px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;
}

.employee-photo-preview--empty {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--accent-soft);
    color: var(--accent);

    font-size: 1.7rem;
    font-weight: 700;
}

.employee-photo-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    background: rgba(0, 0, 0, .55);
    color: white;

    font-size: .66rem;
    font-weight: 650;

    opacity: 0;

    transition: opacity var(--transition);
}

.employee-photo-dropzone:hover .employee-photo-overlay,
.employee-photo-dropzone.is-dragover .employee-photo-overlay {
    opacity: 1;
}

.employee-photo-overlay-icon {
    font-size: 1.2rem;
}

.employee-photo-hint {
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.employee-photo-remove-form {
    margin-top: 12px;
}

.employee-photo-diagnostic {
    margin-top: 14px;
    padding-top: 14px;

    border-top: 1px solid var(--border);

    line-height: 1.6;
    word-break: break-all;
}

.employee-photo-diagnostic code {
    padding: 1px 6px;

    background: var(--bg-solid);
    border-radius: 5px;

    font-size: .82em;
}

.employee-workday-row.wizard-workday-row {
    display: flex;
    align-items: center;

    gap: 12px;
}

.employee-workday-row.wizard-workday-row
.employee-workday-label {
    flex: 0 0 88px;

    text-align: left;
}

.employee-workday-row.wizard-workday-row
.employee-workday-input {
    flex: 1;
}

.employee-workday-row.wizard-workday-row
.employee-workday-input:disabled {
    opacity: .4;

    background: var(--bg-solid);
}

.wizard-weekly-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 16px;

    padding: 12px 16px;

    background: var(--accent-soft);
    border-radius: 10px;

    font-size: .86rem;
}

.wizard-weekly-total strong {
    color: var(--accent);
    font-size: 1.1rem;
}

.reset-link-value {
    margin-top: 8px;

    padding: 8px 10px;

    background: var(--bg-solid);
    border-radius: 8px;

    font-family: monospace;
    font-size: .78rem;

    word-break: break-all;
}

.export-select-all-toggle {
    display: inline-flex;
    vertical-align: middle;
}

.export-select-all-label {
    display: inline-block;
    vertical-align: middle;

    margin-left: 10px;

    font-size: .86rem;
    font-weight: 560;
}

.employee-checkbox-list {
    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid var(--border);
}

.export-employee-list-actions {
    display: flex;
    gap: 8px;

    margin-bottom: 14px;
}

.employee-checkbox-item {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 4px;

    border-bottom: 1px solid var(--border);

    font-size: .86rem;
    cursor: pointer;
}

.employee-checkbox-item:last-child {
    border-bottom: none;
}

.employee-checkbox-item small {
    display: block;

    color: var(--text-muted);
    font-size: .72rem;
}


.employee-detail-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/*
 * Arbeitszeit-Tab auf der Mitarbeiter-Detailseite: Monats-
 * Navigation und Zusammenfassungs-Kacheln, analog zur eigenen
 * Zeit-Seite (toolbar.php/summary.php), aber eigenständig für
 * den Admin-Kontext.
 */
.hours-tab-toolbar {
    align-items: center;
}

.hours-tab-nav {
    display: flex;
    gap: 8px;
}

.hours-tab-summary {
    margin: 16px 0;
}

.employee-profile-form {
    margin-top: 20px;
}

.employee-profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.employee-profile-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

@media (max-width: 700px) {
    .employee-profile-form-grid {
        grid-template-columns: 1fr;
    }
}

.employee-detail-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.employee-detail-edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.employee-detail-edit-actions .btn.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.employee-status-tabs {
    display: inline-flex;
    gap: 4px;

    padding: 4px;
    margin-bottom: 18px;

    background: rgba(0,0,0,.035);
    border-radius: 12px;
}

.employee-status-tab {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;

    color: var(--text-secondary);
    text-decoration: none;

    border-radius: 9px;

    font-size: .78rem;
    font-weight: 650;

    transition:
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

.employee-status-tab:hover {
    color: var(--text);
}

.employee-status-tab.active {
    color: var(--text);
    background: white;
    box-shadow: var(--shadow-sm);
}


.employee-change-request-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.employee-change-request {
    padding: 14px 16px;
    border-radius: 14px;
}

.employee-change-request-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding-bottom: 10px;
    margin-bottom: 2px;

    border-bottom: 1px solid var(--border);
}

.employee-change-request-header h3 {
    margin: 2px 0 0;
    font-size: 1rem;
}

.employee-change-request-status {
    display: inline-flex;
    align-items: center;

    min-height: 28px;
    padding: 0 9px;

    border-radius: 999px;
    background: rgba(0, 0, 0, .04);

    font-size: .72rem;
    font-weight: 750;
}

.employee-change-request-status--planned {
    background: #fff3cd;
    color: #8a6200;
}

.employee-change-request-status--applied {
    background: #dff6e7;
    color: #176b3a;
}

.employee-change-request-status--cancelled {
    background: rgba(0, 0, 0, .05);
    color: var(--text-secondary);
}

.employee-change-items {
    display: grid;
}

.employee-change-item {
    display: grid;
    grid-template-columns: minmax(130px, .65fr) minmax(0, 1.35fr);
    align-items: center;
    gap: 16px;

    min-height: 42px;

    border-bottom: 1px solid var(--border);
}

.employee-change-item:last-child {
    border-bottom: 0;
}

.employee-change-item > span {
    color: var(--text-secondary);

    font-size: .74rem;
    font-weight: 600;
}

.employee-change-values {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.employee-change-values strong {
    font-size: .82rem;
}

.employee-change-values > span {
    color: var(--text-secondary);
    font-size: .78rem;
}

.employee-change-values strong:last-child {
    font-weight: 750;
}









.employee-detail-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin: 18px 0 16px;
    padding: 4px;

    border-radius: 12px;
    background: rgba(0, 0, 0, .035);
}

.employee-detail-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    padding: 0 14px;

    border-radius: 9px;

    color: var(--text-secondary);
    text-decoration: none;

    font-size: .82rem;
    font-weight: 700;

    transition:
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.employee-detail-tab:hover {
    color: var(--text);
    text-decoration: none;
}

.employee-detail-tab.is-active {
    background: #fff;
    color: var(--text);

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .08),
        0 4px 12px rgba(0, 0, 0, .04);
}














.employee-change-discard-btn {
    min-height: 34px;
    padding: 0 12px;

    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 9px;

    background: rgba(37, 99, 235, .08);
    color: #2563eb;

    font-size: .78rem;
    font-weight: 700;

    cursor: pointer;
}

.employee-change-discard-btn:hover {
    background: rgba(37, 99, 235, .13);
}



.btn {
    text-decoration: none;
}

.btn:hover,
.btn:focus,
.btn:active {
    text-decoration: none;
}



.employee-workweek-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    margin-top: 8px;
}

.employee-workday-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.employee-workday-label {
    font-size: .78rem;
    font-weight: 650;
    color: var(--text-secondary);
}

.employee-workday-input {
    min-width: 0;
}

@media (max-width: 800px) {
    .employee-workweek-grid {
        grid-template-columns: 1fr;
    }
}

.employee-detail-tab {
    position: relative;
    
}

.employee-detail-tab + .employee-detail-tab::before {
    content: "";
    position: absolute;
    left: -4px;
    
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: rgba(100, 116, 139, 0.22);
}

.employee-vacation-year-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.employee-vacation-year-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.employee-vacation-year-select {
    width: auto;
    min-width: 92px;
    padding-top: 7px;
    padding-bottom: 7px;
}