/* === Skalierung + Grundschrift ============================================ */
html { font-size: 85%; }

/* === Dunkle Aubergine-Palette (überschreibt Pico dark defaults) =========== */
:root {
  --pico-background-color:                 #1a1625;
  --pico-card-background-color:            #231d31;
  --pico-card-sectioning-background-color: #1d1829;
  --pico-color:                            #ede8f5;
  --pico-muted-color:                      #a89bc2;
  --pico-muted-border-color:               #2e2545;
  --pico-border-color:                     #312848;
  --pico-primary:                          #c084fc;
  --pico-primary-hover:                    #a855f7;
  --pico-primary-focus:                    rgba(192, 132, 252, .28);
  --pico-primary-inverse:                  #1a1625;
  --pico-primary-background:               #2d1f48;
  --pico-primary-underline:                rgba(192, 132, 252, .45);
  --pico-form-element-background-color:    #1d1829;
  --pico-form-element-border-color:        #312848;
  --pico-form-element-focus-color:         rgba(192, 132, 252, .28);
  --pico-form-element-color:               #ede8f5;
  --pico-form-element-placeholder-color:   #7a6e92;
  --pico-code-background-color:            #261f38;
  --pico-contrast:                         #ede8f5;
  --pico-contrast-inverse:                 #1a1625;
}

/* === Lang-Toggle-Button im Header ========================================= */
.lang-btn {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 0.2rem 0.65rem;
  vertical-align: middle;
  margin-left: 0.75rem;
  line-height: 1.5;
  color: #fff !important;
  border-color: rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.12) !important;
  border-radius: .4rem;
}
.lang-btn:hover {
  background: rgba(255,255,255,.25) !important;
  border-color: #fff !important;
}

/* === Gradient-Header ====================================================== */
main > hgroup {
  background: linear-gradient(135deg, #f43f5e 0%, #7c3aed 60%, #4f46e5 100%);
  padding: 1.75rem 2rem;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 24px rgba(244, 63, 94, .25), 0 2px 8px rgba(124, 58, 237, .3);
}
main > hgroup h1 {
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
main > hgroup p { color: rgba(255,255,255,.85); margin: .3rem 0 0; }

/* === Karten =============================================================== */
article {
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  border-radius: .85rem;
}

/* === Pro Schritt eine eigene Akzentfarbe (oben + Header-Text) ============= */
#step-upload      { border-top: 3px solid #60a5fa; }
#step-analyse     { border-top: 3px solid #c084fc; }
#step-revise      { border-top: 3px solid #34d399; }
#step-coverletter { border-top: 3px solid #22d3ee; }
#step-interview   { border-top: 3px solid #fb7185; }
#step-search      { border-top: 3px solid #fbbf24; }

#step-upload      header strong { color: #60a5fa; }
#step-analyse     header strong { color: #c084fc; }
#step-revise      header strong { color: #34d399; }
#step-coverletter header strong { color: #22d3ee; }
#step-interview   header strong { color: #fb7185; }
#step-search      header strong { color: #fbbf24; }

/* === Match-Score ========================================================== */
progress#score-bar::-webkit-progress-value {
  background: linear-gradient(90deg, #fb7185 0%, #34d399 55%, #c084fc 100%);
  border-radius: 4px;
}
progress#score-bar::-moz-progress-bar {
  background: linear-gradient(90deg, #fb7185 0%, #34d399 55%, #c084fc 100%);
}

/* === Badge ================================================================ */
.badge {
  display: inline-block;
  padding: .15rem .65rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, #f43f5e, #7c3aed);
  color: #fff;
  font-size: .85rem;
  font-weight: bold;
}

/* === Job-Cards ============================================================ */
.job-card { border-left: 4px solid #fbbf24; border-radius: .75rem; }
.job-card .score-tag {
  float: right;
  font-weight: bold;
  background: #fbbf24;
  color: #1a1625;
  padding: .1rem .5rem;
  border-radius: .4rem;
}
.job-card .src {
  font-size: .75rem;
  text-transform: uppercase;
  opacity: .5;
}

/* === Toast ================================================================ */
.toast {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  color: #fff;
  padding: .65rem 1.3rem;
  border-radius: .65rem;
  z-index: 1000;
  max-width: 90%;
  box-shadow: 0 4px 16px rgba(124, 58, 237, .4);
}
.toast.error {
  background: linear-gradient(90deg, #be123c, #f43f5e);
  box-shadow: 0 4px 16px rgba(244, 63, 94, .4);
}

/* === KI-Response-Card ===================================================== */
.response-card {
  background: var(--pico-card-sectioning-background-color);
  border-left: 3px solid #c084fc;
  border-radius: 0 .65rem .65rem 0;
  padding: 1rem 1.2rem;
  margin-top: .6rem;
}

.response-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #c084fc;
  margin-bottom: .6rem;
}

.response-section-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pico-muted-color);
  margin: 0 0 .4rem;
}

/* Score-Zeile */
.score-row { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .4rem; }
.score-label { font-weight: 600; font-size: .95rem; }
.score-value { font-size: 2rem; font-weight: 800; line-height: 1; }
.score-max   { font-size: .9rem; color: var(--pico-muted-color); }
.score-good  { color: #34d399; }
.score-ok    { color: #fbbf24; }
.score-bad   { color: #fb7185; }

/* Scrollbox für Vorher/Nachher */
.scroll-box {
  max-height: 28rem;
  overflow-y: auto;
}

/* === Markdown-Prose-Rendering ============================================= */
.md-render { line-height: 1.75; font-size: .93rem; }
.md-render h1, .md-render h2, .md-render h3, .md-render h4 {
  margin: 1.1em 0 .35em;
  font-weight: 700;
  line-height: 1.3;
  color: #ede8f5;
}
.md-render h1 { font-size: 1.25em; }
.md-render h2 { font-size: 1.1em; }
.md-render h3 { font-size: 1em; }
.md-render ul, .md-render ol { padding-left: 1.4em; margin: .4em 0 .75em; }
.md-render li { margin-bottom: .28em; }
.md-render p  { margin: 0 0 .65em; }
.md-render p:last-child { margin-bottom: 0; }
.md-render strong { font-weight: 700; color: #ede8f5; }
.md-render code {
  background: var(--pico-code-background-color);
  padding: .1em .35em;
  border-radius: .25em;
  font-size: .88em;
  color: #c084fc;
}
.md-render blockquote {
  border-left: 3px solid #312848;
  margin: .5em 0;
  padding-left: .8em;
  color: var(--pico-muted-color);
}

/* Match-Note kompakter */
.match-note { font-size: .88rem; padding: .6rem .9rem; margin-top: .5rem; }

/* Tips-Details */
.tips-details summary { font-size: .88rem; cursor: pointer; color: #34d399; font-weight: 600; }

/* === Diverses ============================================================= */
.btn-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.btn-row button { width: auto; }

.note {
  background: var(--pico-card-sectioning-background-color);
  border-radius: .75rem;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 24rem;
  overflow: auto;
  font-size: .85rem;
}

.file-inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.file-inline input { width: auto; }

/* === Eigene (uebersetzbare) Datei-Auswahl-Buttons ========================= */
.upload-row { margin-bottom: 1rem; }
.field-label { display: block; font-weight: 600; margin-bottom: .3rem; }
/* nativen File-Input verstecken, aber zugaenglich lassen (Label oeffnet ihn) */
.file-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.file-field { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.file-btn {
  display: inline-block;
  background: var(--pico-primary);
  color: #fff !important;
  border-radius: .4rem;
  padding: .4rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.file-btn:hover { background: var(--pico-primary-hover); }
/* Tastatur-Fokus sichtbar machen (versteckter Input liegt in .file-field) */
.file-field:focus-within .file-btn { outline: 2px solid var(--pico-primary-focus); outline-offset: 2px; }
.file-name {
  font-size: .85rem;
  color: var(--pico-muted-color);
  overflow: hidden;
  text-overflow: ellipsis;
}

button[aria-busy="true"] { pointer-events: none; }

/* === Buttons: immer weisse Schrift ======================================== */
button, [type="submit"], [type="button"] {
  color: #fff !important;
}

/* === Multi-User: Header-Userbar, Login, Admin ============================= */
.user-label {
  font-size: .8rem;
  color: #fff;
  opacity: .9;
  margin-left: .6rem;
  vertical-align: middle;
}
.lang-btn[role="button"] { text-decoration: none; }

.login-page { max-width: 30rem; }
.login-card { margin-top: 1rem; }
.login-card button[type="submit"] { width: 100%; margin-top: .5rem; }

.admin-page table { font-size: .9rem; }
.admin-page td a { cursor: pointer; }
.admin-page td a.u-del { color: #fb7185; }

/* === Kanban-Pipeline-Seite ================================================ */
.board-page { padding-top: 1rem; }
.board-page .lang-btn { text-decoration: none; }

.board-empty {
  text-align: center;
  color: var(--pico-muted-color);
  padding: 2rem 1rem;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: .85rem;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.kanban-col {
  background: var(--pico-card-sectioning-background-color);
  border-radius: .85rem;
  border: 1px solid var(--pico-border-color);
  min-height: 8rem;
  transition: background .15s, border-color .15s;
}
.kanban-col.drop-hover {
  border-color: var(--pico-primary);
  background: var(--pico-primary-background);
}

.kanban-col-head {
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--pico-border-color);
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* Spaltenfarben analog zu den Schritt-Akzenten */
.kanban-col[data-status="analyzed"] .kanban-col-head { color: #c084fc; }
.kanban-col[data-status="applied"]  .kanban-col-head { color: #60a5fa; }
.kanban-col[data-status="interview"].kanban-col-head,
.kanban-col[data-status="interview"] .kanban-col-head { color: #fbbf24; }
.kanban-col[data-status="offer"]    .kanban-col-head { color: #34d399; }
.kanban-col[data-status="rejected"] .kanban-col-head { color: #fb7185; }

.kanban-col-count {
  margin-left: auto;
  background: var(--pico-muted-border-color);
  color: var(--pico-color);
  border-radius: 1rem;
  padding: .05rem .55rem;
  font-size: .75rem;
}

.kanban-col-body {
  padding: .6rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-height: 4rem;
}

.kard {
  background: var(--pico-card-background-color);
  border-radius: .6rem;
  border: 1px solid var(--pico-border-color);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  padding: .7rem .8rem;
  margin: 0;
  cursor: grab;
}
.kard.dragging { opacity: .5; }
.kard h4 { margin: 0 0 .15rem; font-size: .92rem; line-height: 1.25; }
.kard-company { margin: 0; font-size: .8rem; color: var(--pico-muted-color); }
.kard-meta { margin: .1rem 0 .4rem; font-size: .72rem; color: var(--pico-muted-color); }

.kard-followup {
  background: linear-gradient(90deg, #be123c, #f43f5e);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border-radius: .35rem;
  padding: .12rem .45rem;
  margin-bottom: .4rem;
  display: inline-block;
}

.kard-notes {
  width: 100%;
  font-size: .8rem;
  margin: 0 0 .45rem;
  padding: .35rem .5rem;
  resize: vertical;
  min-height: 2.4rem;
}

.kard-actions {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
}
.kard-actions a { cursor: pointer; text-decoration: none; }
.kard-remove { color: var(--pico-muted-color) !important; }
.kard-remove:hover { color: #fb7185 !important; }

@media (max-width: 900px) {
  .kanban { grid-auto-flow: column; grid-template-columns: none; }
  .kanban-col { min-width: 190px; }
}