/* ==== Global layout & base colors ==== */
/*
Light blue (#E9F1FA) mainostilat
Soft neutral #F8F8F5 sivun tausta
*/


body {
    background-color: #F8F8F5;
    color: black;
    margin: 0; 
}


/* Tämä on jo hyvää, content-wrapperin avulla keskitetään sisältö */
.content-wrapper {
    max-width: 1000px; /* Voit muuttaa tämän haluamaksesi leveysrajaksi */
    padding: 20px;  /*  Hyvä olla paddingia reunoilla */
    margin: 0 auto;  /* Tämä keskittää */
}

footer {
    background-color: #000000;
    color: white;
    padding: 20px 0; /* Ylä- ja alamarginaali */
    margin-top: auto; /*Työntää footerin alas*/
}

.footer-links {
    margin-top: 10px;  /* Pieni marginaali yläpuolelle */
}

.footer-links a {
    color: lightgray;
    text-decoration: none;
    margin: 0 10px;
}





/* ==== CSP-safe replacements for former inline styles from base.html ==== */

/* Hide element (badge) when unread count is zero */
.is-hidden {
  display: none !important;
}

/* Small ad card image constraints (duplicate of merged .ad-card-img above) */
/*
.ad-card-img {
  max-height: 180px;
  width: 100%;
  height: 180px; 
  object-fit: contain;
}
*/

/* kapea ilmoitusboksi */
.alert-narrow { max-width: 400px; }

/* forgot_password */
.max-width-500 { max-width: 500px; }

/* Unified logo-small height to 2rem */
/* .logo-small {
  height: 2.5em;
} */
.logo-small {
  height: 2rem;
}

/* === Info icon button (popover trigger) === */
.info-icon-btn {
  border: 0;
  background: transparent;
  padding: 0;
  line-height: 0; /* poistaa extra-välit inline-elementeiltä */
  margin-left: 0.5rem;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #e9ecef;   /* harmaa tausta (Bootstrap gray-200) */
  color: #6c757d;              /* i-kirjaimen väri (gray-600) */
  font-weight: 700;
  font-size: 14px;
  border: 1px solid #fff;      /* valkoinen ohut kehä, “häviää” vaaleaan taustaan */
}

.info-icon-btn:hover .info-icon,
.info-icon-btn:focus .info-icon {
  background-color: #dee2e6;   /* aavistus tummempi hover/focus */
  outline: none;
}

/* Huoltolinkin esitys pelkkänä tekstinä modalissa */
.token-plain-link {
  word-break: break-all;            /* rivitä pitkät URL:t modalin sisään */
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  margin: 0;
}
.token-plain-link:focus { outline: none; }

/* Korosta linkkitekstin valinta selkeästi */
.token-plain-link::selection {
  background: #cfe2ff; /* vaalea sininen */
  color: inherit;
}
/* Varmuuskopiot eri moottoreille */
.token-plain-link::-moz-selection { background: #cfe2ff; color: inherit; }
.token-plain-link::-webkit-selection { background: #cfe2ff; color: inherit; }