/* Typografia ja pohja */
:root {
  --vihrea-bg: #e1f1ef;
  --vihrea-raja: #aad9d6;
  --vihrea-teksti: #00594f;
  --keltainen-bg: #fff7e1;
  --keltainen-raja: #f9bf9c;
  --keltainen-teksti: #e0725c;
  --punainen-bg: #fde6d8;
  --punainen-raja: #e0725c;
  --punainen-teksti: #b92f00;
}

body {
  background: #f5f4f1;
  color: #00594f;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* Header */
.app-header {
  background: #00594f;
  color: #f5f4f1;
  padding: 0.75rem 1.5rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.app-logo {
  font-size: 18px;
  opacity: 0.7;
}

/* Panel */
.panel {
  background: #fff;
  border: 0.5px solid #d8d6cf;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.panel-otsikko {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 0.35rem;
}
.panel-kuvaus {
  font-size: 13px;
  color: #6b6a65;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

/* Upload-alue */
.upload-alue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1.5px dashed #c8c6be;
  border-radius: 10px;
  padding: 1.5rem 1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 0.75rem;
  text-align: center;
}
.upload-alue:hover {
  background: #f0efe9;
  border-color: #999;
}
.upload-alue input[type="file"] {
  display: none;
}
.upload-alue.drag-yli {
    background: #e8f0e0;
    border-color: #639922;
}
.upload-ikoni {
  font-size: 28px;
  color: #888;
  line-height: 1;
}
.upload-teksti {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}
.upload-pieni {
  font-size: 11px;
  color: #999;
}

/* Tarkista-nappi */
.btn-tarkista {
  width: 100%;
  padding: 0.6rem;
  background: #1a1a18;
  color: #f5f4f1;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-tarkista:hover { opacity: 0.85; }

/* Latausvilkku */
.lataus-vilkku {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
  padding: 0.5rem 0;
}
.htmx-indicator { display: none; }
.htmx-indicator.htmx-request { display: flex; }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: pyori 0.7s linear infinite;
}
@keyframes pyori { to { transform: rotate(360deg); } }

/* Tuloslaatikot */
.tulos {
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  border: 0.5px solid;
}
.tulos-vihrea  { background: var(--vihrea-bg);   border-color: var(--vihrea-raja); }
.tulos-keltainen { background: var(--keltainen-bg); border-color: var(--keltainen-raja); }
.tulos-punainen  { background: var(--punainen-bg);  border-color: var(--punainen-raja); }

.tulos-otsikko {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 0.4rem;
}
.tulos-vihrea   .tulos-otsikko { color: var(--vihrea-teksti); }
.tulos-keltainen .tulos-otsikko { color: var(--keltainen-teksti); }
.tulos-punainen  .tulos-otsikko { color: var(--punainen-teksti); }
.tulos-ikoni { font-size: 16px; }

.tulos-selite {
  font-size: 12px;
  margin: 0 0 0.75rem;
}

.tulos-tiedot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  font-size: 12px;
  margin: 0;
}
.tulos-tiedot dt {
  color: #666;
  white-space: nowrap;
}
.tulos-tiedot dd {
  margin: 0;
  font-weight: 500;
  word-break: break-all;
}
.mono { font-family: monospace; font-size: 11px; }
.ei-loytynyt { color: #999; font-style: italic; }

/* Galleria */
.kuvamaara {
  font-size: 12px;
  color: #999;
}
.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  max-height: 72vh;
  overflow-y: auto;
  padding-right: 4px;
}
.thumb-kortti {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  border-radius: 8px;
  padding: 6px 4px;
  transition: background 0.12s;
}
.thumb-kortti:hover { background: #f0efe9; }
.thumb-kuva-kehys {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 6px;
  border: 0.5px solid #e0dfd8;
  background: #f0efe9;
}
.thumb-kuva-kehys img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-nimi {
  font-size: 11px;
  color: #555;
  font-family: monospace;
}