/* css/modals.css (Täydellinen ja korjattu) */

/* === MODAALIEN YLEISET TYYLIT === */
.modal {
  display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; overflow-y: auto;
}
.modal.show { display: flex; animation: fadeIn 0.3s ease; }
.modal-content {
  background-color: var(--accent); padding: 20px; border: 1px solid var(--highlight);
  width: 90%; max-width: 500px; border-radius: 8px; position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); animation: slideIn 0.3s ease-out;
  margin: 2rem auto;
}
.close {
  color: var(--text-light); font-size: 28px; font-weight: bold;
  position: absolute; top: 10px; right: 20px; cursor: pointer;
  z-index: 10; /* Varmistetaan, että on napin päällä, jos ne ovat lähellä */
}
.close:hover, .close:focus { color: var(--text-bright); text-decoration: none; cursor: pointer; }

/* ANIMAATIOT */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }


/* === LOMAKKEIDEN TYYLIT MODAALEISSA === */
.modal-content form .form-group,
.modal-content form > div:not(.error-message):not(.success-message) {
    margin-bottom: 1rem;
}
.modal-content form label {
  display: block; margin-bottom: 0.5rem; color: var(--text-light); font-weight: 500;
}
.modal-content form input[type="email"],
.modal-content form input[type="password"],
.modal-content form input[type="text"],
.modal-content form input[type="date"],
.modal-content form input[type="datetime-local"],
.modal-content form input[type="color"],
.modal-content form textarea,
.modal-content form select {
    width: 100%; padding: 0.75rem; border: 1px solid var(--highlight); border-radius: 8px;
    background: var(--dark-bg); color: var(--text-bright); font-size: 1rem;
    font-family: inherit;
}
.modal-content form input[type="color"] { padding: 0.2rem; height: 40px; }
.modal-content form textarea { resize: vertical; min-height: 100px; }


/* === MODAALIEN OTSIKKO- JA SISÄLTÖTYYLIT === */

/* KORJATTU OTSIKKOASETTELU */
.modal-header {
  display: flex;
  align-items: center; /* Tasaa elementit pystysuunnassa keskelle */
  gap: 1rem; /* Lisää välin otsikon ja napin väliin */
  margin-bottom: 1rem;
}
.modal-header h2 {
  flex-grow: 1; /* TÄRKEÄ: Otsikko vie kaiken vapaan tilan ja työntää napin oikealle */
  margin: 0;
  color: var(--text-bright);
  font-size: 1.5rem;
  text-align: left;
}
.modal-header .btn {
  margin: 0;
  flex-shrink: 0; /* Estää nappia kutistumasta, jos otsikko on pitkä */
}

.modal-content h3 {
  color: var(--text-bright); margin-top: 1rem; margin-bottom: 0.5rem; text-align: left; font-size: 1.1rem;
}

/* Päivänäkymä */
#dayDetailsListContainer { max-height: 40vh; overflow-y: auto; padding-right: 10px; }
.day-detail-item { background-color: rgba(255,255,255,0.03); padding: 10px; border-radius: 4px; margin-bottom: 10px; border-left: 3px solid transparent; }
.day-detail-item h4 { margin-top: 0; margin-bottom: 5px; color: var(--text-bright); font-size: 1rem; }
.day-detail-item p { margin-bottom: 5px; font-size: 0.9rem; word-wrap: break-word; }
.day-detail-item .btn-small { margin-top: 8px; }

/* Profiili & Info */
#profileInfo p, .info-content p, #categoryList p { margin-bottom: 0.5rem; }
#profileInfo strong { color: var(--text-bright); }
.info-content ul, .info-content ol { list-style-position: inside; margin-left: 20px; margin-bottom: 10px; }
.info-content h3 { margin-top: 15px; margin-bottom: 5px; color: var(--text-bright); }

/* Kategoriat */
.category-manage-list { list-style-type: none; padding: 0; max-height: 200px; overflow-y: auto; border: 1px solid var(--highlight); border-radius: 4px; margin-bottom: 1rem;}
.category-manage-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--highlight); }
.category-manage-list li:last-child { border-bottom: none; }
.category-manage-list li span:first-child { margin-right: 0.75rem; min-width: 1em; }
.category-manage-list li span:nth-child(2) { flex-grow: 1; margin-right: 1rem; }

/* Uutiset */
#newsModal .modal-content { max-width: 700px; }
.news-container { max-height: 70vh; overflow-y: auto; padding-right: 15px; margin-top: 0; } /* Korjattu margin-top */
.news-item { background-color: rgba(255, 255, 255, 0.03); padding: 1rem; border-radius: 6px; border-left: 4px solid var(--highlight); margin-bottom: 1.5rem; }
.news-item:last-child { margin-bottom: 0; }
.news-item-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--highlight); padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
.news-item-header h4 { margin: 0; color: var(--text-bright); font-size: 1.2rem; }
.news-item-header time { font-size: 0.8rem; color: var(--text-light); opacity: 0.8; white-space: nowrap; margin-left: 1rem; }
.news-item p, .news-item ul { line-height: 1.6; margin-bottom: 1rem; }
.news-item ul { list-style-position: inside; padding-left: 5px; }
.news-item ul li { margin-bottom: 0.5rem; }

/* Tietosuoja */
#privacyPolicyModal .modal-content { max-width: 800px; text-align: left; }
#privacyPolicyContentContainer { max-height: 70vh; overflow-y: auto; padding-right: 15px; line-height: 1.6; margin-top: 0; }
#privacyPolicyContentContainer h3 { margin-top: 1.5em; margin-bottom: 0.5em; color: var(--text-bright); font-size: 1.2em; }
#privacyPolicyContentContainer ul { list-style-position: inside; padding-left: 0; }
#privacyPolicyContentContainer ul ul { margin-left: 20px; }
#privacyPolicyContentContainer p, #privacyPolicyContentContainer li { margin-bottom: 0.75em; }

/* Asetukset */
.settings-options { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 1rem; align-items: center; margin-top: 1rem; margin-bottom: 2rem; }
.settings-options > label { font-weight: 500; text-align: right; color: var(--text-light); }
.slider-container { display: flex; align-items: center; gap: 1rem; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--dark-bg); border-radius: 5px; outline: none; padding: 0; margin: 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #aaaaff; cursor: pointer; border-radius: 50%; border: 2px solid var(--accent); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: #aaaaff; cursor: pointer; border-radius: 50%; border: 2px solid var(--accent); }
#fontSizeValue { font-weight: bold; color: var(--text-bright); min-width: 40px; }
.checkbox-container { display: flex; align-items: center; }
.checkbox-container input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; }
.checkbox-container label { position: relative; cursor: pointer; padding-left: 30px; font-weight: normal !important; }
.checkbox-container label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: var(--dark-bg); border: 2px solid var(--highlight); border-radius: 4px; transition: all 0.2s ease; }
.checkbox-container label::after { content: ''; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px; border: solid var(--text-bright); border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.2s ease; }
.checkbox-container input[type="checkbox"]:checked + label::after { opacity: 1; }
.checkbox-container input[type="checkbox"]:checked + label::before { background-color: #6666ff; border-color: #8888ff; }
.settings-options select { max-width: 250px; }

/* Admin-työkalut */
.admin-controls { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--highlight); text-align: right; }
.edit-controls { width: 100%; }
.editor-help-box { background-color: rgba(0, 0, 0, 0.2); border: 1px solid var(--highlight); border-radius: 6px; padding: 0.75rem; margin-bottom: 1rem; font-size: 0.85rem; }
.editor-help-box h5 { margin-top: 0; margin-bottom: 0.5rem; color: var(--text-bright); font-size: 1rem; }
.editor-help-box p { margin-bottom: 0.5rem; }
.editor-help-box ul { list-style-type: none; padding: 0; margin: 0; }
.editor-help-box ul li { margin-bottom: 0.25rem; }
.editor-help-box code { background-color: rgba(255, 255, 255, 0.1); padding: 2px 5px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; }

.danger-zone {
  border: 2px solid var(--error);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1.5rem;
  background-color: rgba(244, 67, 54, 0.1);
}
.danger-zone h4 {
  margin-top: 0;
  color: var(--error);
}

.feedback-container {
  max-height: 70vh;
  overflow-y: auto;
  margin-top: 1rem;
}
.feedback-item {
  border: 1px solid var(--highlight);
  border-left-width: 4px;
  border-radius: 4px;
  margin-bottom: 1rem;
  padding: 1rem;
}
.feedback-item[data-status="uusi"] {
  border-left-color: var(--success);
  background-color: rgba(76, 175, 80, 0.1);
}
.feedback-item[data-status="luettu"] {
  border-left-color: var(--highlight);
}
.feedback-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--highlight);
}
.feedback-sender {
  font-weight: bold;
  color: var(--text-bright);
}
.feedback-meta {
  font-size: 0.85em;
  color: var(--text-light);
  opacity: 0.8;
}
.feedback-content {
  white-space: pre-wrap; /* Säilyttää rivinvaihdot */
  line-height: 1.6;
}
.feedback-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--highlight);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.feedback-status {
  font-style: italic;
  opacity: 0.7;
  font-weight: normal;
}
.feedback-reply-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--highlight);
}
.feedback-reply-form textarea {
  width: 100%;
  min-height: 120px;
  margin-bottom: 0.5rem;
}
.feedback-reply-form button {
    margin-right: 0.5rem;
}