/* === Allgemein & Body === */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: white;
  background-color: #000;
}

a {
  color: white;

  text-decoration: none;
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
  color: white;
}

/* === Body mit Hintergrund === */
body.dashboard,
body.admin,
body.project-create {
  background-image: url('VPX.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  padding: 1em;
}

body.project-create {
  background-size: 100% auto;
}

body.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('VPX.jpg');
  background-size: cover;
  background-position: center;
}

/* === Login === */
.login-box {
  background: #222;
  padding: 1.5em;
  border: 1px solid white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
  width: 300px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 0.4em;
  margin: 0.4em 0;
  border: none;
  border-radius: 4px;
}

/* === Buttons Allgemein === */
button, .lock-project-btn {
  font-size: 13px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid;
  
  width: 150px;
}

button {
  background-color: white;
  color: black;
  padding: 12px;
}

button:hover {
  background-color: rgb(221, 218, 218);
  color: black;
  padding: 12px;
}


.info-box {
  position: absolute;
  top: 20px;
  right: 20px;
  
  border: 1px solid #ccc;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  max-width: 300px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.info-box ul {
  padding-left: 18px;
  margin: 8px 0;
}
.info-box li {
  margin-bottom: 4px;
}


/* === Projektbereich === */
.project {
  margin-bottom: 0.5em;
  border: 2px solid #28a745;
  border-radius: 6px;
  background: white;
  color: rgb(0, 0, 0);
  padding: 0.75em;
  max-width: 50%;
  box-sizing: border-box;
}
    .project-locked {
      border: 2px solid red !important;
      background-color: #cf6767 !important;
    }
    .project-question {
      border: 2px solid orange !important;
      background-color: #fae49d !important;
    }

.project.locked {
  border-color: #e74c3c !important;
  background-color: #e28585 !important;
}

.project.question {
  border-color: orange !important;
  background-color: #fde69b !important;
}

    .project-clarification {
      border: 2px solid orange !important;
      background-color: #fae49d !important;
    }

        .project.clarification {
      border: 2px solid orange !important;
      background-color: #fae49d !important;
    }



/* Kompakter Header */
.project-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  font-size: 12px;
  margin-bottom: 0.5em;
}

/* Titelbereiche */
.project-title-left,
.project-title-center,
.project-title-right {
  flex: 1;
  min-width: 120px;
  margin: 2px 5px;
}

.project-title-center {
  text-align: center;
}
.project-title-right {
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.project-title-right button {
  min-width: auto;
  padding: 4px 6px;
  font-size: 11px;
}

/* Boxen-Inhalte */
.project-box {
  padding: 0.5em 0;
  font-size: 12px;
}
.project-summary {
  cursor: pointer;
  font-weight: bold;
  opacity: 0.8;
}
.details-toggle {
  font-size: 11px;
  opacity: 0.7;
}

/* Projekt-Meta */
.project-meta {
  font-size: 11px;
  color: #333 !important;
  margin: 0.25em 0;
}

/* Datei-Liste */
.file-list {
  font-size: 11px;
  padding-left: 1em;
}
.file-list li {
  margin-bottom: 0.3em;
}
.file-list a {
  color: black !important;
}
.file-list a:hover {
  text-decoration: underline;
}



/* Erfolg/Fehler Upload */
.upload-success,
.upload-error {
  font-size: 12px;
  padding: 6px;
  border-radius: 4px;
  margin-top: 6px;
}
.upload-success {
  color: green;
  background: #cbfdcb;
  border: 1px solid green;
}
.upload-error {
  color: red;
  background: #f5c2c2;
  border: 1px solid red;
}

/* Formular & Fileinput */
.project-content form input[type="file"] {
  margin-right: 6px;
}
.project-content form button {
  padding: 4px 10px;
  font-size: 12px;
}

/* Neues Projekt */
.new-project-box {
  background: #222;
  border: 1px solid white;
  padding: 1em;
  border-radius: 6px;
  margin-bottom: 1.5em;
  max-width: 450px;
}
.project.new-project h2 {
  font-size: 14px;
  color: white;
}
.project.new-project input[type="text"] {
  font-size: 12px;
}