/* Layout & Scroll Fix */
#hrApp { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.hr-layout { flex: 1; min-height: 0; display: flex; gap: 20px; overflow: hidden; }

/* Sidebar Linksbündig & Dashboard Button */
.hr-sidebar { width: 300px; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 15px; display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; }
.hr-sidebar .colex-search-box { width: 100%; box-sizing: border-box; }
.hr-employee-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }

/* Dashboard Link in Sidebar */
.hr-dashboard-btn { background: #f8fafc; border: 1px dashed var(--border); margin-bottom: 10px; }
.hr-dashboard-btn:hover { background: #f1f5f9; border-color: var(--accent); }

/* Absolute Linksbündigkeit der Mitarbeiter */
.hr-employee-item { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 12px; padding: 10px; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; }
.hr-employee-item:hover { background: #f8fafc; }
.hr-employee-item.active { background: #f0f7ff; border-color: #cce5ff; }
.hr-employee-item .colex-avatar { width: 36px; height: 36px; font-size: 14px; flex-shrink: 0; margin: 0 !important; }
.hr-employee-info-box { display: flex; flex-direction: column; align-items: flex-start; text-align: left; overflow: hidden; }
.hr-employee-name { font-size: 14px; font-weight: 500; color: var(--primary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.hr-employee-role { font-size: 12px; color: var(--text-muted); }

/* FIX: Drag & Drop für Liste - Icon rechtsbündig! */
.hr-employee-item.drag-over { border: 1px dashed var(--accent); opacity: 0.8; }
.hr-employee-item.dragging { opacity: 0.4; }
.hr-drag-handle { cursor: grab; color: var(--border); margin-left: auto; display: none; }
.hr-employee-item:hover .hr-drag-handle { display: block; color: var(--text-muted); }

/* Main Profile Area */
.hr-main-content { flex: 1; background: white; border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }

/* Profile Header */
.hr-profile-header { padding: 30px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: white; flex-shrink:0; z-index: 10;}
.hr-profile-info { display: flex; align-items: center; gap: 20px; }

.hr-big-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; overflow: hidden; position: relative; cursor: pointer; margin: 0 !important; }
.hr-big-avatar .avatar-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.2s; color: white; }
.hr-big-avatar:hover .avatar-overlay { opacity: 1; }

.hr-profile-info h2 { margin: 0 0 5px 0; font-size: 24px; color: var(--primary); }
.hr-role-badge { display: inline-block; background: #f1f5f9; border: 1px solid var(--border); padding: 4px 10px; border-radius: 20px; font-size: 12px; color: var(--text-muted); font-weight: 500; }
.hr-badge-birthday { background: #fee2e2; color: #ef4444; font-size: 12px; padding: 4px 10px; border-radius: 20px; font-weight: 600; border: 1px solid #fecaca; }

.hr-profile-stats { display: flex; gap: 30px; }
.hr-stat { display: flex; align-items: center; gap: 10px; }
.hr-stat .material-symbols-outlined { color: var(--text-muted); font-size: 24px; }
.hr-stat-text { display: flex; flex-direction: column; }
.hr-stat-text small { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.hr-stat-text strong { font-size: 13px; color: var(--primary); }

/* Tabs einzeilig & no wrap */
.hr-tabs { display: flex; border-bottom: 1px solid var(--border); background: white; padding: 0 30px; flex-shrink:0; z-index: 10; overflow-x: auto; }
.hr-tab { padding: 15px 20px; background: transparent; border: none; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: 0.2s; white-space: nowrap; }
.hr-tab:hover { color: var(--accent); }
.hr-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.hr-tab-content { display: none; padding: 30px; overflow-y: auto; flex: 1; }
.hr-tab-content.active { display: block; }
.hr-bg-gray { background-color: #f8fafc; }

/* Cards */
.hr-card-container { display: flex; flex-direction: column; gap: 24px; max-width: 1100px; margin: 0 auto; }
.hr-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 25px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); margin-bottom: 0; }
.hr-card-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--primary); margin-top: 0; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.hr-card-title .material-symbols-outlined { color: var(--text-muted); font-size: 20px; }

/* Forms & Tables */
.hr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hr-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0 !important; }
.hr-form-group label { font-size: 13px; font-weight: 500; color: var(--text-muted); }

.hr-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; }
.hr-table th { background: #fcfcfc; padding: 12px 15px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.hr-table td { padding: 15px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--primary); vertical-align: middle; }
.hr-table tr:last-child td { border-bottom: none; }

.hr-status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.hr-status-badge.draft { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.hr-status-badge.submitted { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.hr-status-badge.none { background: #e2e3e5; color: #383d41; border: 1px solid #d6d8db; }
.hr-status-badge.pending { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.hr-status-badge.approved { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.hr-status-badge.rejected { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* KPI Cards (NoWrap für Title) */
.hr-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.hr-kpi-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 15px; }
.hr-kpi-icon { width: 48px; height: 48px; border-radius: 12px; background: #f1f5f9; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.hr-kpi-icon .material-symbols-outlined { font-size: 24px; }
.hr-kpi-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 2px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.hr-kpi-val { font-size: 24px; font-weight: bold; color: var(--primary); }

/* Document Views */
.hr-view-toggles { display: flex; gap: 5px; background: #f1f5f9; padding: 4px; border-radius: 6px; border: 1px solid var(--border); }
.hr-view-btn { background: transparent; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; color: var(--text-muted); transition: 0.2s; display:flex; align-items:center; justify-content:center; }
.hr-view-btn.active { background: white; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.hr-doc-container { transition: all 0.3s; }
.hr-doc-container.view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.hr-doc-container.view-list { display: flex; flex-direction: column; gap: 8px; }

.hr-doc-card { background: white; border: 1px solid var(--border); border-radius: 8px; position: relative; transition: 0.2s; display: flex; text-decoration: none; color: var(--primary); cursor:pointer; }
.hr-doc-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(249,115,22,0.1); transform: translateY(-2px); }

.view-grid .hr-doc-card { flex-direction: column; height: 180px; overflow: hidden; }
.view-grid .hr-doc-thumb { height: 100px; width: 100%; background: #f8fafc; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.view-grid .hr-doc-info { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.view-grid .hr-doc-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-grid .hr-doc-date { font-size: 11px; color: var(--text-muted); display:flex; justify-content:space-between; align-items:center;}
.view-grid .hr-doc-cat { font-size: 10px; background:#f1f5f9; padding:2px 6px; border-radius:4px; }

.hr-doc-delete { position: absolute; top: 10px; right: 10px; background: white; border: 1px solid var(--border); border-radius: 4px; padding: 4px; color: var(--danger); cursor: pointer; display: none; }
.view-grid .hr-doc-card:hover .hr-doc-delete { display: flex; }

.view-list .hr-doc-card { flex-direction: row; align-items: center; padding: 10px 15px; height: auto; border-radius: 6px; }
.view-list .hr-doc-thumb { height: 36px; width: 36px; background: #f8fafc; display: flex; align-items: center; justify-content: center; border-radius: 4px; margin-right: 15px; border: 1px solid var(--border); color: var(--text-muted); }
.view-list .hr-doc-info { display: flex; align-items: center; justify-content: space-between; flex: 1; }
.view-list .hr-doc-name { font-size: 14px; font-weight: 500; flex:1; }
.view-list .hr-doc-date { font-size: 12px; color: var(--text-muted); width: 250px; display:flex; justify-content:flex-end; gap:15px; align-items:center; }
.view-list .hr-doc-delete { position:relative; top:0; right:0; margin-left: 15px; display:flex; align-items:center; border:none; background:transparent; }
.view-list .hr-doc-card:hover .hr-doc-delete { background:#fee2e2; }

/* Feedback Chat Bubbles */
.hr-feedback-item { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 15px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.hr-fb-head { display: flex; align-items:center; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.hr-fb-cat { font-size: 10px; text-transform: uppercase; font-weight: bold; padding: 3px 8px; border-radius: 4px; margin-right: 10px; }
.hr-fb-cat.Notiz { background: #e0e7ff; color: #1e40af; }
.hr-fb-cat.Performance { background: #dcfce7; color: #065f46; }
.hr-fb-cat.Zielvereinbarung { background: #fef9c3; color: #92400e; }
.hr-fb-cat.Verwarnung { background: #fee2e2; color: #b91c1c; }

.hr-fb-body { font-size: 14px; color: var(--primary); white-space: pre-wrap; line-height: 1.5; }
.hr-fb-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
.hr-fb-action-btns { display:flex; gap:5px; opacity:0; transition:0.2s; }
.hr-feedback-item:hover .hr-fb-action-btns { opacity: 1; }

.hr-live-feed-item { display:flex; align-items:center; gap:10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.hr-live-feed-item:last-child { border-bottom: none; }
.hr-live-feed-time { color: var(--text-muted); width: 80px; }