/* ==========================================================================
   Portal-specific styles — Employee portal layout
   ========================================================================== */

/* -- Topbar -- */
.topbar {
  background: var(--color-primary);
  color: #fff;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  height: 56px;
  justify-content: space-between;
}
.topbar-brand { display: flex; align-items: center; gap: var(--space-sm); }
.topbar-brand img { height: 28px; width: auto; }
.topbar-right { display: flex; align-items: center; gap: var(--space-md); }
.topbar-right .user-name { font-size: var(--font-size-sm); color: var(--charme-lichtgroen); }
.topbar a { color: var(--charme-beige); text-decoration: none; font-size: var(--font-size-sm); }
.topbar a:hover { color: #fff; }


/* -- Tabs -- */
.tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.tab {
  padding: 12px 20px;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.tab:hover { color: var(--color-text); }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-secondary); }


/* -- Panels -- */
.panel { display: none; padding: var(--space-lg); max-width: 800px; margin: 0 auto; }
.panel.active { display: block; }


/* -- Schedule -- */
.schedule-week {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.schedule-week:last-child { border-bottom: none; }
.week-label { width: 140px; font-weight: 500; font-size: var(--font-size-base); }
.week-dates { width: 120px; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.week-activities { flex: 1; }
.activity-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: #fff;
  margin: 2px 4px 2px 0;
}


/* -- Simple table (agreements) -- */
.portal-table { width: 100%; border-collapse: collapse; }
.portal-table th {
  text-align: left;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}
.portal-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-base);
}


/* -- Profile Photo & CV Uploads -- */
.profile-uploads {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
}
.profile-photo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.profile-photo-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--charme-grijs);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--color-border);
}
.profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-placeholder {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.profile-photo-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cv-upload-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.cv-status {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}
.cv-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}


/* -- Planning Grid -- */
.planning-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.planning-week-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  background: var(--color-bg);
}
.planning-week-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.planning-week-dates {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.planning-week-activities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.planning-activity {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.planning-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}


/* -- Documents -- */
.doc-category {
  margin-bottom: var(--space-lg);
}
.doc-category:last-child {
  margin-bottom: 0;
}
.doc-category-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: var(--font-size-xs);
}
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doc-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.1s, border-color 0.1s;
}
.doc-item:hover {
  background: var(--color-bg);
  border-color: var(--color-secondary);
  color: var(--color-text);
}
.doc-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.doc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.doc-title {
  font-weight: 500;
  font-size: var(--font-size-base);
}
.doc-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.doc-download-icon {
  font-size: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}


/* -- Main Planning Table (Hoofdplanning) -- */
.planning-table-wrap{overflow-x:auto;margin:8px 0 24px}
.planning-table{width:100%;border-collapse:collapse;font-size:13px}
.planning-table th,.planning-table td{border:1px solid var(--color-border,#ddd);padding:6px 8px;text-align:left;vertical-align:top;white-space:nowrap}
.planning-table th{background:var(--charme-beige,#F5F3E8);font-weight:600;position:sticky;top:0}
.planning-block-name{font-weight:500;white-space:nowrap}
.activity-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.planning-name{display:inline-block;padding:2px 6px;border-radius:4px;font-size:12px;margin:1px}
.planning-empty{color:var(--color-text-muted,#999);font-size:11px}


/* -- Inline Document Viewer -- */
.doc-inline-item{border:1px solid var(--color-border,#ddd);border-radius:8px;margin:8px 0;overflow:hidden}
.doc-inline-header{padding:12px 16px;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:8px;background:#fff}
.doc-inline-header:hover{background:var(--charme-beige,#F5F3E8)}
.doc-expand-icon{transition:transform .2s;font-size:10px}
.doc-inline-item.open .doc-expand-icon{transform:rotate(90deg)}
.doc-inline-viewer{display:none;padding:0}
.doc-inline-item.open .doc-inline-viewer{display:block}


/* -- Responsive -- */
@media (max-width: 768px) {
  .topbar { padding: 0 var(--space-md); }
  .tabs { padding: 0 var(--space-md); overflow-x: auto; white-space: nowrap; }
  .tab { padding: 12px 14px; font-size: var(--font-size-sm); }
  .panel { padding: var(--space-md); }
  .schedule-week { flex-wrap: wrap; }
  .week-label, .week-dates { width: 100%; }
  .profile-uploads { flex-direction: column; gap: var(--space-md); }
  .planning-week-header { flex-direction: column; align-items: flex-start; gap: 2px; }
}