/* ================================================
   Kurzzeit Portal – Frontend Styles
   ================================================ */

:root {
  --kzp-green:      #004234;
  --kzp-green-dark: #002e24;
  --kzp-cream:      #F8F8EE;
  --kzp-yellow:     #F8EF70;
  --kzp-red:        #E0492F;
  --kzp-black:      #111111;
  --kzp-white:      #ffffff;
  --kzp-border:     #d0d0c0;
  --kzp-muted:      #555550;
  --kzp-radius:     8px;
  --kzp-shadow:     0 1px 3px rgba(0,0,0,.10);
  --kzp-shadow-lg:  0 8px 24px rgba(0,0,0,.14);
}

/* ---- Login ---- */
.kzp-login-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 0;
}
.kzp-login-box {
  background: var(--kzp-white);
  border: 1px solid var(--kzp-border);
  border-radius: var(--kzp-radius);
  box-shadow: var(--kzp-shadow-lg);
  padding: 40px;
  width: 100%;
  max-width: 420px;
}
.kzp-login-header { text-align: center; margin-bottom: 28px; }
.kzp-login-header h2 { font-size: 22px; margin: 0 0 6px; color: var(--kzp-green); }
.kzp-login-header p  { color: var(--kzp-muted); margin: 0; }
.kzp-login-footer    { text-align: center; margin-top: 16px; }
.kzp-login-footer a  { color: var(--kzp-green); font-size: 14px; }

/* ---- Buttons ---- */
.kzp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--kzp-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all .15s ease;
  white-space: nowrap;
}
.kzp-btn-primary       { background: var(--kzp-green); color: var(--kzp-white); }
.kzp-btn-primary:hover { background: var(--kzp-green-dark); color: var(--kzp-white); }
.kzp-btn-outline       { background: var(--kzp-white); color: var(--kzp-black); border: 1px solid var(--kzp-border); }
.kzp-btn-outline:hover { background: var(--kzp-cream); }
.kzp-btn-danger        { background: var(--kzp-cream); color: var(--kzp-red); border: 1px solid #f0c0b8; padding: 7px 12px; }
.kzp-btn-danger:hover  { background: #fde8e4; }
.kzp-btn-sm            { padding: 6px 12px; font-size: 13px; }
.kzp-btn-full          { width: 100%; justify-content: center; padding: 12px; }

/* ---- Fields ---- */
.kzp-field        { margin-bottom: 16px; }
.kzp-field label  { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--kzp-black); }
.kzp-field input, .kzp-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--kzp-border);
  border-radius: var(--kzp-radius);
  font-size: 14px;
  color: var(--kzp-black);
  box-sizing: border-box;
  transition: border-color .15s;
  background: var(--kzp-white);
}
.kzp-field input:focus, .kzp-field textarea:focus {
  outline: none;
  border-color: var(--kzp-green);
  box-shadow: 0 0 0 3px rgba(0,66,52,.12);
}

/* ---- Portal ---- */
.kzp-portal { max-width: 100%; margin: 0; padding: 0; }

.kzp-portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.kzp-portal-welcome h2 { margin: 0; font-size: 22px; color: var(--kzp-green); }

/* ---- Progress card ---- */
.kzp-progress-card {
  background: var(--kzp-cream);
  border: 1px solid var(--kzp-border);
  border-radius: var(--kzp-radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.kzp-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--kzp-black);
  margin-bottom: 10px;
}
.kzp-progress-bar {
  height: 10px;
  background: #d8d8c8;
  border-radius: 99px;
  overflow: hidden;
}
.kzp-progress-fill {
  height: 100%;
  background: var(--kzp-green);
  border-radius: 99px;
  transition: width .5s ease;
}
.kzp-progress-fill.complete { background: var(--kzp-green); }
.kzp-progress-message         { margin: 10px 0 0; font-size: 13px; color: var(--kzp-muted); }
.kzp-progress-message.success { color: var(--kzp-green); font-weight: 600; }

/* ---- Tabs ---- */
.kzp-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--kzp-border);
  margin-bottom: 20px;
}
.kzp-tab {
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--kzp-muted);
  transition: all .15s;
}
.kzp-tab:hover  { color: var(--kzp-green); }
.kzp-tab.active { color: var(--kzp-white); background: var(--kzp-green); border-bottom-color: var(--kzp-green); border-radius: 6px 6px 0 0; }

.kzp-tab-content        { display: none; }
.kzp-tab-content.active { display: block; }

.kzp-section-title    { margin-bottom: 16px; }
.kzp-section-title h3 { margin: 0 0 4px; font-size: 17px; color: var(--kzp-black); }
.kzp-section-title p  { margin: 0; color: var(--kzp-muted); font-size: 14px; }

/* ---- Doc items (checklist) ---- */
.kzp-doc-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--kzp-white);
  border: 1px solid var(--kzp-border);
  border-radius: var(--kzp-radius);
  margin-bottom: 10px;
}
.kzp-doc-item.uploaded { border-left: 4px solid var(--kzp-green); }
.kzp-doc-item.missing  { border-left: 4px solid var(--kzp-yellow); }
.kzp-doc-status-icon   { font-size: 22px; flex-shrink: 0; padding-top: 2px; }
.kzp-doc-info          { flex: 1; }
.kzp-doc-info strong   { display: block; font-size: 15px; margin-bottom: 3px; color: var(--kzp-black); }
.kzp-doc-info small    { display: block; color: var(--kzp-muted); font-size: 13px; margin-bottom: 6px; }
.kzp-doc-action        { flex-shrink: 0; }

.kzp-uploaded-files { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.kzp-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--kzp-green);
  text-decoration: none;
}
.kzp-file-link:hover { text-decoration: underline; }
.kzp-file-size { color: var(--kzp-muted); }

/* ---- File list ---- */
.kzp-file-list { display: flex; flex-direction: column; gap: 8px; }
.kzp-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--kzp-white);
  border: 1px solid var(--kzp-border);
  border-radius: var(--kzp-radius);
}
.kzp-file-icon                { font-size: 24px; flex-shrink: 0; }
.kzp-file-meta                { flex: 1; min-width: 0; }
.kzp-file-meta strong         { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kzp-black); }
.kzp-file-meta small          { color: var(--kzp-muted); font-size: 12px; }
.kzp-file-meta em             { display: block; font-size: 13px; color: var(--kzp-muted); }
.kzp-file-actions             { display: flex; gap: 6px; flex-shrink: 0; }

/* ---- Empty state ---- */
.kzp-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--kzp-muted);
  background: var(--kzp-cream);
  border-radius: var(--kzp-radius);
  font-size: 15px;
}

/* ---- Error/Notice ---- */
.kzp-notice { padding: 14px; border-radius: var(--kzp-radius); background: var(--kzp-yellow); border: 1px solid #e0d840; color: var(--kzp-black); }
.kzp-error  { background: #fdf0ee; border: 1px solid #f0c0b8; color: var(--kzp-red); padding: 12px; border-radius: var(--kzp-radius); margin-bottom: 14px; }

/* ---- Modal ---- */
.kzp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}
.kzp-modal {
  background: var(--kzp-white);
  border-radius: var(--kzp-radius);
  box-shadow: var(--kzp-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.kzp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}
.kzp-modal-header h3  { margin: 0; font-size: 17px; color: var(--kzp-black); }
.kzp-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--kzp-muted);
  padding: 4px 8px;
  border-radius: 6px;
}
.kzp-modal-close:hover { background: var(--kzp-cream); }
.kzp-modal-body { padding: 20px 24px 24px; }

/* ---- Upload zone ---- */
.kzp-upload-zone {
  border: 2px dashed var(--kzp-border);
  border-radius: var(--kzp-radius);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  margin-bottom: 16px;
  position: relative;
  background: var(--kzp-cream);
}
.kzp-upload-zone:hover, .kzp-upload-zone.drag-over {
  border-color: var(--kzp-green);
  background: #e8f0ee;
}
.kzp-upload-zone .kzp-upload-icon  { font-size: 36px; margin-bottom: 8px; }
.kzp-upload-zone p                 { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--kzp-black); }
.kzp-upload-zone small             { color: var(--kzp-muted); font-size: 12px; }
.kzp-upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

.kzp-selected-file {
  background: var(--kzp-yellow);
  border: 1px solid #e0d840;
  border-radius: var(--kzp-radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  color: var(--kzp-black);
}

#kzp-upload-result { margin-top: 12px; font-size: 14px; }

@media (max-width: 600px) {
  .kzp-doc-item       { flex-wrap: wrap; }
  .kzp-file-row       { flex-wrap: wrap; }
  .kzp-portal-header  { flex-direction: column; align-items: flex-start; }
  .kzp-login-box      { padding: 24px; }
}