/* --- Perusasetukset --- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: auto; /* Salli vaakasuuntaiset scrollit tarvittaessa */
  font-family: sans-serif;
  background: #eef4f8;
  color: #003366;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* --- Header --- */
header {
  width: 100vw; /* Koko selainikkunan leveys */
  background: #005588;
  color: white;
  padding: 1em;
  text-align: center;
  white-space: normal; /* Sallii rivityksen */
  overflow-x: auto;
}

/* --- Navigaatio --- */
nav {
  width: 100vw;
  background: #0077aa;
  padding: 1em 0;
  text-align: center;
  white-space: normal; /* Sallii rivityksen */
  overflow-x: auto;
}

nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap; /* Linkit eivät rivity itsessään */
}

nav a:hover {
  text-decoration: underline;
}

/* --- Pääsisältö --- */
main {
  padding: 2em 1em 4em 1em;
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: auto;
  box-sizing: border-box;
  background: transparent;
}

/* --- Lomake --- */
form {
  background: white;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  max-width: 420px;
  margin: 1em auto;
  box-sizing: border-box;
}

.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.2em;
}

.form-row label {
  font-weight: bold;
  margin-bottom: 0.5em;
  color: #003366;
}

.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="datetime-local"],
.form-row select,
.form-row input[type="file"],
.form-row datalist {
  padding: 0.6em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  box-sizing: border-box;
}

.form-row input[type="file"] {
  padding: 0.3em;
}

input[type="submit"] {
  background-color: #0077aa;
  color: white;
  padding: 0.8em 1.5em;
  border: none;
  font-size: 1em;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  max-width: 300px;
  align-self: center;
  transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #005f88;
}

form input,
form datalist {
  display: block;
  margin: 10px 0;
  padding: 8px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

/* --- Taulukko --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5em;
  background: white;
  box-sizing: border-box;
  overflow-x: auto;
}

th, td {
  padding: 0.6em 0.8em;
  border: 1px solid #ccc;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95em;
  color: #003366;
  font-family: inherit;
}

th:nth-child(1), td:nth-child(1) { width: 20%; }
th:nth-child(2), td:nth-child(2) { width: 15%; }
th:nth-child(3), td:nth-child(3) { width: 15%; }
th:nth-child(4), td:nth-child(4) { width: 12%; }
th:nth-child(5), td:nth-child(5) { width: 12%; }
th:nth-child(6), td:nth-child(6) { width: 26%; }

td button {
  white-space: nowrap;
  padding: 0.3em 0.6em;
  font-size: 0.9em;
  background-color: #0077aa;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 0.3em;
  font-family: inherit;
}

td button:hover {
  background-color: #005f88;
}

/* --- Responsiivisuus pienillä näytöillä --- */
@media (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  main {
    padding: 1em;
  }

  .form-row {
    margin-bottom: 1em;
  }

  input[type="submit"] {
    width: 100%;
  }
}

/* --- Footer --- */
footer {
  background: #005588;
  color: white;
  text-align: center;
  padding: 1em;
  position: fixed;
  bottom: 0;
  width: 100vw;
  box-sizing: border-box;
  white-space: normal;
}
#sisalto {
  background-color: #cfdce4;  /* Tummempi sävy kuin tausta (#eef4f8) */
  border: 1px solid #000000;  /* Ohut musta reuna */
  border-radius: 8px;         /* Pyöristetyt kulmat */
  padding: 1.5em;             /* Sisätyhjennys */
  margin: 2em auto;           /* Ympärillä tilaa */
  max-width: 900px;           /* Maksimileveys */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); /* Kevyt varjo */
}

/* --- Mobiilikorjaukset 2026-06-29 ---
   Työpöytänäkymä pidetään ennallaan. Nämä säännöt aktivoituvat vain
   tableteilla ja puhelimilla. */
img, video, iframe {
  max-width: 100%;
}

/* CanvasJS käyttää absoluuttisesti sijoitettuja canvas-tasoja.
   Älä rajoita niitä yleisellä canvas max-width -säännöllä. */
.chart-box canvas,
#chartContainer canvas,
.canvasjs-chart-container canvas {
  max-width: none !important;
  background: transparent !important;
}

button,
input,
select,
textarea {
  font: inherit;
  max-width: 100%;
}

@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
  }

  header,
  nav,
  footer {
    width: 100%;
  }

  header {
    padding: 0.75em 0.6em;
  }

  header h1 {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.15;
  }

  nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    text-align: left;
    overflow-x: visible;
  }

  nav a {
    display: block;
    margin: 0;
    padding: 0.72em 0.6em;
    border-radius: 6px;
    background: rgba(255,255,255,0.12);
    text-align: center;
    white-space: normal;
    line-height: 1.15;
  }

  main {
    width: 100%;
    max-width: 100%;
    padding: 0.85em 0.65em 1.5em;
    overflow-x: hidden;
  }

  form {
    width: 100%;
    max-width: 100%;
    padding: 1em;
    margin: 0.8em auto;
  }

  form input,
  form select,
  form textarea,
  form datalist {
    max-width: 100%;
  }

  input[type="submit"],
  button,
  .kalareissu-btn,
  .kalareissu-edit-btn {
    min-height: 42px;
  }

  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.9em;
    padding: 0.55em 0.6em;
  }

  td button,
  td a,
  .kalareissu-edit-btn {
    white-space: nowrap;
  }

  #sisalto {
    margin: 0.8em auto;
    padding: 1em;
    max-width: 100%;
  }

  footer {
    position: static;
    padding: 0.75em;
  }
}

@media (max-width: 520px) {
  nav {
    grid-template-columns: 1fr;
  }

  header h1 {
    font-size: 1.35rem;
  }

  main {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  th,
  td {
    font-size: 0.86em;
    padding: 0.5em;
  }

  .paivakentat {
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 900px) {
  .front-wrap,
  .kalareissu-box {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.9em !important;
    padding-right: 0.9em !important;
  }

  .kalareissu-hallinta {
    position: static !important;
  }

  .kalareissu-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .kalareissu-table {
    min-width: 760px;
  }

  .kalareissu-lajitaulu {
    min-width: 560px;
  }

  .kalareissu-yhteenveto > td {
    padding: 10px !important;
  }

  .kalareissu-kalastajat {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }

  .kalareissu-kalastaja-check {
    border-radius: 8px !important;
    justify-content: flex-start;
  }

  .top-fish-row {
    grid-template-columns: 52px 1fr !important;
  }

  .top-fish-values {
    grid-column: 2 !important;
    text-align: left !important;
    white-space: normal !important;
  }
}

@media (max-width: 520px) {
  .kalareissu-kalastajat {
    grid-template-columns: 1fr;
  }

  .kalareissu-box,
  .front-card {
    border-radius: 8px !important;
    padding: 0.85em !important;
  }

  .saaliKuva {
    max-width: 72px !important;
    max-height: 72px !important;
  }

  #chartContainer {
    height: 300px !important;
  }
}

/* Teemaeditorin kaavioasetukset: vain turvalliset lisätyylit, ei koko sivuston uudelleenkirjoitusta */
.chart-box,
.canvasjs-chart-container,
#chartContainer {
  background: var(--kp-chart-bg, #ffffff) !important;
  color: var(--kp-chart-text, #10202f) !important;
}
.chart-error {
  text-align: center;
  color: var(--kp-chart-text, #666666);
  margin-top: 130px;
}


/* === Kalapäiväkirja keskitetty teema 2026 === */
:root{
  --kp-primary:#005588;
  --kp-primary2:#0077aa;
  --kp-nav:#0077aa;
  --kp-footer:#005588;
  --kp-bg:#eef4f8;
  --kp-card:#ffffff;
  --kp-soft:#f3f8fb;
  --kp-text:#10202f;
  --kp-heading:#003b6f;
  --kp-border:#d5e1e8;
  --kp-button:#0077aa;
  --kp-button-text:#ffffff;
  --kp-table-header:#e9f2f8;
  --kp-input-bg:#ffffff;
  --kp-chart-bg:#ffffff;
  --kp-chart-text:#10202f;
  --kp-chart-grid:#d5e1e8;
  --kp-chart-column:#0077aa;
  --kp-chart-line:#005b96;
  --kp-chart-pie1:#0077aa;
  --kp-chart-pie2:#2fb3c6;
  --kp-chart-pie3:#86c06a;
  --kp-chart-pie4:#f2a14a;
}
body{background:var(--kp-bg);color:var(--kp-text);} 
header{background:var(--kp-primary);color:var(--kp-button-text);} 
nav{background:var(--kp-nav);} 
footer{background:var(--kp-footer);color:var(--kp-button-text);} 
main{background:transparent;}
a{color:var(--kp-primary2);} 
h1,h2,h3,h4,h5,h6,label{color:var(--kp-heading);} 
button,.button,input[type="submit"]{background:var(--kp-button);color:var(--kp-button-text);}
input,select,textarea{background:var(--kp-input-bg);color:var(--kp-text);border-color:var(--kp-border);}
table,.front-card,.stats-card,.stat-card,.stat-box,.hallinta-card,.editor-card,.page-editor,.site-preview-panel{background:var(--kp-card);color:var(--kp-text);border-color:var(--kp-border);} 
th{background:var(--kp-table-header);color:var(--kp-heading);} 
td,th{border-color:var(--kp-border);} 
.latest-item,.top-fish-row,.bar-bg,.theme-option,.builder-item{background:var(--kp-soft);border-color:var(--kp-border);} 
.chart-box,#chartContainer,.canvasjs-chart-container{background:var(--kp-chart-bg)!important;}
.chart-error{color:var(--kp-text);background:var(--kp-card);border:1px solid var(--kp-border);border-radius:8px;padding:12px;}


/* CanvasJS-teemakorjaus: ulkoinen laatikko saa saman värin,
   varsinainen kaavion tausta tulee CanvasJS:n backgroundColor-asetuksesta. */
.chart-box,
#chartContainer,
.canvasjs-chart-container {
  background-color: var(--kp-chart-bg, #ffffff) !important;
}
.chart-box canvas,
#chartContainer canvas,
.canvasjs-chart-container canvas {
  background: transparent !important;
  max-width: none !important;
}

/* --- Hampurilaisvalikko puhelimille 2026-06-29 ---
   Työpöydällä valikko pysyy vanhan kaltaisena. */
.kp-mobile-menu-toggle,
.kp-mobile-menu-button {
  display: none;
}
.kp-menu-links {
  display: inline;
}

@media (max-width: 900px) {
  nav.kp-main-nav {
    display: block;
    padding: 8px;
    text-align: left;
    overflow-x: visible;
  }

  .kp-mobile-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    border-radius: 8px;
    background: rgba(255,255,255,0.18);
    color: var(--kp-button-text, #fff);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
  }

  .kp-mobile-menu-button span {
    font-size: 1.35rem;
    line-height: 1;
  }

  .kp-menu-links {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }

  .kp-mobile-menu-toggle:checked ~ .kp-menu-links {
    display: grid;
  }

  nav.kp-main-nav .kp-menu-links a {
    display: block;
    margin: 0;
    padding: 0.78em 0.6em;
    border-radius: 7px;
    background: rgba(255,255,255,0.12);
    text-align: center;
    white-space: normal;
    line-height: 1.15;
    text-decoration: none;
  }

  nav.kp-main-nav .kp-menu-links a:hover {
    background: rgba(255,255,255,0.22);
    text-decoration: none;
  }

  nav.kp-main-nav .kp-menu-links .kp-hide-mobile {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .kp-menu-links {
    grid-template-columns: 1fr;
  }
}

/* --- Mobiilivalikon pakotettu korjaus 2026-06-29 ---
   Poistaa checkbox-toteutuksen ongelmat ja varmistaa, ettei
   työpöytä- ja mobiilivalikko näy yhtä aikaa. */
nav.kp-main-nav {
  display: block !important;
}
nav.kp-main-nav .kp-mobile-menu-toggle {
  display: none !important;
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
nav.kp-main-nav .kp-mobile-menu-button {
  display: none !important;
  border: 0;
  font: inherit;
}
nav.kp-main-nav .kp-menu-links {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
}
nav.kp-main-nav .kp-menu-links a {
  display: inline-block !important;
}

@media (max-width: 900px) {
  nav.kp-main-nav {
    padding: 8px !important;
    text-align: left !important;
    overflow: visible !important;
  }
  nav.kp-main-nav .kp-mobile-menu-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0.7em 0.9em;
    border-radius: 8px;
    background: rgba(255,255,255,0.18);
    color: var(--kp-button-text, #fff);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
  }
  nav.kp-main-nav .kp-mobile-menu-button span {
    font-size: 1.45rem;
    line-height: 1;
  }
  nav.kp-main-nav .kp-menu-links {
    display: none !important;
    width: 100%;
    margin-top: 8px;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  nav.kp-main-nav.kp-mobile-menu-open .kp-menu-links {
    display: grid !important;
  }
  nav.kp-main-nav .kp-menu-links a {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0.85em 0.7em !important;
    border-radius: 8px;
    background: rgba(255,255,255,0.13);
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    text-decoration: none;
  }
  nav.kp-main-nav .kp-menu-links a.kp-hide-mobile {
    display: none !important;
  }
}

/* --- Lopullinen korjaus: erillinen työpöytä- ja mobiilivalikko 2026-06-29 --- */
nav.kp-main-nav {
  width: 100% !important;
  background: var(--kp-nav, #0077aa) !important;
  padding: 0.75em 0 !important;
  text-align: center !important;
  overflow: visible !important;
}
nav.kp-main-nav .kp-desktop-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
}
nav.kp-main-nav .kp-desktop-menu a {
  display: inline-block !important;
  color: white !important;
  margin: 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
nav.kp-main-nav .kp-mobile-menu {
  display: none !important;
}
nav.kp-main-nav .kp-mobile-menu-button {
  display: none !important;
}
nav.kp-main-nav .kp-mobile-menu-links {
  display: none !important;
}

@media screen and (max-width: 900px) {
  nav.kp-main-nav {
    padding: 10px 12px !important;
    text-align: left !important;
  }
  nav.kp-main-nav .kp-desktop-menu {
    display: none !important;
  }
  nav.kp-main-nav .kp-mobile-menu {
    display: block !important;
    width: 100% !important;
  }
  nav.kp-main-nav .kp-mobile-menu-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0.75em 0.9em !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.16) !important;
    color: #fff !important;
    font: inherit !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }
  nav.kp-main-nav .kp-mobile-menu-button span {
    font-size: 1.35rem !important;
    line-height: 1 !important;
  }
  nav.kp-main-nav .kp-mobile-menu-links {
    display: none !important;
    width: 100% !important;
    margin-top: 8px !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  nav.kp-main-nav.kp-mobile-menu-open .kp-mobile-menu-links {
    display: grid !important;
  }
  nav.kp-main-nav .kp-mobile-menu-links a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.85em 0.7em !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.13) !important;
    color: #fff !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }
  nav.kp-main-nav .kp-mobile-menu-links a:hover {
    background: rgba(255,255,255,0.22) !important;
    text-decoration: none !important;
  }
}


/* --- Yhtenäiset sisältösivut 2026-07-03 ---
   Käytössä mm. Kaikki saaliit ja Kalapaikat -sivuilla. */
.kp-page-wrap{
  width:min(1100px, calc(100vw - 32px));
  max-width:1100px;
  margin:18px auto 80px;
  color:var(--kp-text,#10202f);
}
.kp-page-wrap.kp-page-wide{
  width:min(1320px, calc(100vw - 32px));
  max-width:1320px;
}
.kp-page-card,
.kp-filter-card,
.kp-table-card{
  background:var(--kp-card,#fff);
  color:var(--kp-text,#10202f);
  border:1px solid var(--kp-border,#d5e1e8);
  border-radius:8px;
  box-shadow:0 1px 8px rgba(0,0,0,.07);
  padding:18px;
  margin:0 0 12px;
  box-sizing:border-box;
}
.kp-page-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.kp-page-hero h2,
.kp-page-card h2,
.kp-page-card h3,
.kp-table-card h2,
.kp-table-card h3{
  margin-top:0;
  color:var(--kp-heading,#003b6f);
}
.kp-page-hero p,
.kp-page-card p{
  margin:.35rem 0 0;
  line-height:1.42;
}
.kp-page-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.kp-page-button,
.kp-page-wrap button,
.kp-page-wrap .button{
  border:0;
  border-radius:7px;
  background:var(--kp-button,#0077aa);
  color:var(--kp-button-text,#fff);
  font-weight:800;
  padding:9px 12px;
  text-decoration:none;
  cursor:pointer;
}
.kp-page-button:hover,
.kp-page-wrap button:hover,
.kp-page-wrap .button:hover{
  filter:brightness(.96);
  text-decoration:none;
}
.kp-filter-form{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  max-width:none!important;
  width:100%!important;
}
.kp-filter-grid{
  display:grid;
  grid-template-columns:minmax(240px,1fr) repeat(2,minmax(160px,.45fr));
  gap:12px;
  align-items:end;
}
.kp-filter-field label,
.kp-filter-options strong{
  display:block;
  font-weight:900;
  margin-bottom:5px;
  color:var(--kp-heading,#003b6f);
}
.kp-filter-field input,
.kp-filter-field select,
.kp-filter-options select{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--kp-border,#d5e1e8);
  border-radius:7px;
  padding:9px 10px;
  background:var(--kp-input-bg,#fff);
  color:var(--kp-text,#10202f);
}
.kp-filter-options{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-top:14px;
}
.kp-filter-options label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--kp-text,#10202f);
}
.kp-filter-options input[type="checkbox"]{
  width:auto;
  max-width:none;
  margin:0;
}
.kp-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.kp-table-scroll table{
  margin-top:0;
  margin-bottom:0;
}
.kp-table-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
.kp-table-pagination{
  margin:8px 0 10px;
}
.kp-place-form{
  max-width:none!important;
  width:100%!important;
  margin:0 0 12px!important;
}
.kp-place-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
}
.kp-place-form-grid input{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
.kp-place-map-row{
  margin-top:12px;
}
.kp-notice{
  background:var(--kp-soft,#f3f8fb);
  border:1px solid var(--kp-border,#d5e1e8);
  border-radius:7px;
  padding:10px 12px;
}
@media(max-width:900px){
  .kp-page-wrap,
  .kp-page-wrap.kp-page-wide{
    width:100%;
    max-width:none;
    padding:0 10px;
    margin-top:10px;
  }
  .kp-page-hero{
    align-items:flex-start;
    flex-direction:column;
  }
  .kp-filter-grid,
  .kp-place-form-grid{
    grid-template-columns:1fr;
  }
  .kp-page-card,
  .kp-filter-card,
  .kp-table-card{
    padding:14px;
    border-radius:8px;
  }
}

/* --- Taulukoiden raidoitus ja lomakekorttien yhtenäistys 2026-07-03 --- */
.kp-zebra-table tbody tr:nth-child(even){
  background:var(--kp-table-stripe,#f3f8fb);
}
.kp-zebra-table tbody tr:nth-child(odd){
  background:var(--kp-card,#fff);
}
.kp-zebra-table tbody tr:hover{
  background:var(--kp-table-hover,#e8f3f9);
}
.kp-zebra-table th{
  background:var(--kp-soft,#edf6fb);
}
.kp-auth-page{
  max-width:640px;
}
.kp-auth-card{
  max-width:520px!important;
  width:100%!important;
  margin:0 auto 12px!important;
}
.kp-auth-card h2{
  margin-top:0;
  color:var(--kp-heading,#003b6f);
}
.kp-card-intro{
  margin:.25rem 0 1rem;
  opacity:.86;
  line-height:1.42;
}
.kp-auth-links{
  margin-top:18px;
  text-align:center;
}
.kp-success-inline,
.kp-error-inline{
  border-radius:7px;
  padding:10px 12px;
  margin:0 0 12px;
  font-weight:700;
}
.kp-success-inline{
  color:#116329;
  background:#ecfff1;
  border:1px solid #bdebc8;
}
.kp-error-inline{
  color:#9f1239;
  background:#fff1f2;
  border:1px solid #fecdd3;
}
.kp-catch-page .kp-page-hero{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.kp-catch-form-card input[type="file"]{
  width:100%;
  max-width:100%;
}
.kp-place-form-grid label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-weight:800;
  color:var(--kp-heading,#003b6f);
}
.kp-place-form-grid label input{
  font-weight:400;
  color:var(--kp-text,#10202f);
}
@media(max-width:600px){
  .kp-auth-page,
  .kp-catch-page{
    width:100%;
    padding-left:10px;
    padding-right:10px;
  }
}

/* --- Lisää saalis -sivun korttien yhtenäinen leveys 2026-07-03 --- */
.kp-catch-page .kp-page-hero,
.kp-catch-page #debug-info,
.kp-catch-page .trip-start-box,
.kp-catch-page .kp-catch-form-card,
.kp-catch-page .success-message,
.kp-catch-page .error{
  width:100%!important;
  max-width:720px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.kp-catch-page .kp-catch-form-card{
  box-sizing:border-box;
}