/* ============================================================
   LOGIN
   ============================================================ */
.login-hero {
  position: relative;
  overflow: hidden;
}
.login-hero .overlay {
  position: absolute;
  inset: 0;
  z-index: 0; /* login-hero overlay jää taakse */
}
.login-hero .logo,
.login-hero .header-content {
  position: relative;
  z-index: 1;
}

/* ============================================================
   YLEINEN ASETTELU
   ============================================================ */
body {
  font-family: 'Roboto', sans-serif;
  background-color: #f8f9fa;
  color: #333;
  margin: 0;
  padding: 0;

  /* footer stickiness */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }

/* ============================================================
   OVERLAY (Yleinen)
   - tätä käytetään headerissä ja loginissa
   ============================================================ */
.overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 1;
}

/* ============================================================
   HEADER
   ============================================================ */
header {
  background-image: url('img/header-background.webp');
  background-size: cover;
  background-position: center;
  position: relative;
  color: white;
  padding: 1.5rem 20px;
}

/* Headerin overlay kerros */
header .overlay { z-index: 1; }

/* Otsikko/contents overlayn päälle */
.header-content { position: relative; z-index: 2; }

/* Grid-asettelu: otsikko oikeasti keskelle */
header.intra-header{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Vasen: logo */
header.intra-header .logo{
  grid-column: 1;
  justify-self: start;
  display: block;
  margin-right: 20px;
  z-index: 2;
}

/* Keskellä: otsikko */
header.intra-header .intra-title{
  grid-column: 2;
  justify-self: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  font-size: 28px;
  margin: 0;
}

/* Oikea: valmius + burger */
header.intra-header .header-right{
  grid-column: 3;
  justify-self: end;
  z-index: 2;
}

/* Burger-nappi */
.mobile-toggler {
  z-index: 2;
  background: rgba(0,0,0,.45);
  border-radius: 10px;
  padding: .25rem .5rem;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar { margin-bottom: 20px; }

.navbar-nav .nav-item .nav-link{
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  white-space: nowrap;
}
.navbar-nav .nav-item .nav-link:hover{
  background-color: #c82333;
  border-radius: 5px;
}

/* Toggler */
.navbar-toggler{
  border-color: white;
  color: white;
  margin-right: 10px;
}

/* Desktop-nav näkyy vain >= lg */
.desktop-nav { display: block; }

/* ==== NAV ICON ALIGN FIX ==== */

.dropdown-item i,
.offcanvas .nav-link i,
.offcanvas .dropdown-item i {
    display: inline-block;
    width: 1.35rem;
    text-align: center;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* ============================================================
   DESKTOP NAV ICON ALIGN
   ============================================================ */

.desktop-nav .nav-link i,
.navbar-nav .dropdown-toggle i {
    display: inline-block;
    width: 1.2rem;
    text-align: center;
    margin-right: 0.35rem;
    flex-shrink: 0;
}

/* ============================================================
   KORTIT, NAPIT, LISTAT
   ============================================================ */
.card{
  border: none;
  border-radius: 10px;
  background-color: #ffffff;
  margin-bottom: 20px;
}
.card-body{ padding: 20px; }
.card-title{ font-size: 20px; font-weight: bold; }

.btn-primary{ background-color: #dc3545; border: none; }
.btn-primary:hover{ background-color: #c82333; }

.list-group-item{ border: none; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: linear-gradient(90deg, #2c2f33 0%, #23272a 100%);
  color: #ddd;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  padding: 0.4rem 0;
  border-top: 1px solid #444;
}
.footer-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.footer-left { display: flex; align-items: center; gap: 0.8rem; }
.footer-right { display: flex; align-items: center; gap: 0.5rem; }

.social-icon { color: #bbb; font-size: 1.2rem; text-decoration: none; }
.social-icon:hover { color: #fff; }

.up-btn{
  color: #bbb; border-color: #bbb; background: none;
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.85rem; padding: 0.2rem 0.4rem; border-radius: 0.25rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.up-btn i{ font-size: 1rem; }
.up-btn .up-text{ display: inline-block; line-height: 1; }
.up-btn:hover,.up-btn:focus{ color: #fff; border-color: #fff; background-color: rgba(255,255,255,0.1); }

/* ============================================================
   MUUT
   ============================================================ */
.accordion-button:focus { box-shadow: none; outline: none; }

#backToTop { position: fixed; right: 1rem; bottom: 1rem; z-index: 1100; }
.note-toggle, .note-input { display: none !important; }
.example-img { width: 60px; height: auto; }

/* --- Ajoneuvon siluetti --- */
.car-guide { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
.car-silhouette { display: block; width: 100%; height: auto; background: transparent; }
.marker { cursor: pointer; transition: transform .15s ease; }
.marker:hover { transform: scale(1.2) translate(var(--tx,0), var(--ty,0)); }
.preview-img{
  display: none; width: 60px; height: auto; margin-top: .5rem;
  border: 1px solid #ccc; background: #fff;
}

/* ============================================================
   ERROR BAR
   ============================================================ */
#errorMessages{
  position: sticky;
  top: .75rem;
  z-index: 2500;
  margin-top: .5rem;
}
@media (max-width: 576px){
  #errorMessages{ top: .5rem; margin-top: .25rem; }
}

/* ============================================================
   PUUTTUVAN RIVIN KOROSTUS (vain kerran)
   ============================================================ */
.missing-row{
  border: 2px solid #dc3545 !important;
  background: #fff5f5;
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.15);
}
.missing-row .form-select,
.missing-row textarea,
.missing-row input[type="file"]{
  border-color: #dc3545 !important;
}
.missing-row label{ color: #dc3545; }

/* ============================================================
   COLLAPSE-NUOLI
   ============================================================ */
.collapse-toggle .chev{
  display: inline-block;
  transition: transform 0.15s ease;
  transform: rotate(0deg);
}
.collapse-toggle:not(.collapsed) .chev{
  transform: rotate(90deg);
}

/* ============================================================
   DROPDOWN SUBMENU (Bootstrap 5)
   ============================================================ */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu{
  top: 0;
  left: 100%;
  margin-top: -0.25rem;
}
@media (min-width: 992px){
  .dropdown-submenu:hover > .dropdown-menu{ display: block; }
}
.dropdown-submenu > a::after{
  content: "›";
  float: right;
  margin-left: .5rem;
  opacity: .8;
}

/* ============================================================
   AJONEUVON TARKISTUS
   ============================================================ */
.ajoneuvo-page .card-title {
  font-weight: 700;
}

.ajoneuvo-page .progress-wrap {
  min-width: 220px;
}

.car-guide {
  width: min(100%, 760px);
  min-height: 540px;
  margin-inline: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.car-silhouette {
  width: min(100%, 320px);
  height: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  display: block;
}

.marker {
  z-index: 5;
  cursor: pointer;
}

.marker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.marker-hit {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #0d6efd;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
  box-shadow: 0 6px 18px rgba(13,110,253,.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.marker-hit:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 22px rgba(13,110,253,.36);
}

.marker-hit i {
  font-size: 1.35rem;
  line-height: 1;
}

.marker.has-file .marker-hit {
  background: #198754;
  box-shadow: 0 6px 18px rgba(25,135,84,.28);
}

.marker-label {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.1;
  box-shadow: 0 .15rem .45rem rgba(0,0,0,.08);
  white-space: nowrap;
}

.preview-wrap {
  width: 150px;
}

.preview-img {
  width: 150px;
  height: 105px;
  object-fit: cover;
  background: #f8f9fa;
  border-radius: .6rem;
  border: 1px solid rgba(0,0,0,.08);
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.example-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: .5rem;
}

.other-photos-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .75rem;
}

.other-photos-preview img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: .5rem;
  border: 1px solid var(--bs-border-color);
}

.save-bar {
  z-index: 1025;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  display: grid;
  place-items: center;
  z-index: 2000;
}

.loading-box {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-radius: .75rem;
  box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.15);
  padding: 2rem 2.25rem;
  min-width: 260px;
}

.marker-highlight .marker-hit {
  animation: pulseMarker 1.2s ease;
}

@keyframes pulseMarker {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.12); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Tablet ja pienempi desktop */
@media (max-width: 991.98px) {
  .car-guide {
    width: 100%;
    min-height: 500px;
  }

  .car-silhouette {
    width: min(70vw, 250px);
  }

  .marker-hit {
    width: 42px;
    height: 42px;
  }

  .marker-label {
    font-size: .74rem;
    padding: .18rem .45rem;
    max-width: 110px;
    white-space: normal;
    text-align: center;
    border-radius: .7rem;
  }

  .preview-wrap {
    width: 120px;
  }

  .preview-img {
    width: 120px;
    height: 86px;
  }
}

/* Mobiili */
@media (max-width: 575.98px) {
  .car-guide {
    min-height: 430px;
  }

  .car-silhouette {
    width: min(72vw, 260px);
  }

  .marker-hit {
    width: 38px;
    height: 38px;
  }

  .marker-hit i {
    font-size: 1.15rem;
  }

  .marker-label {
    display: none;
  }

  .preview-wrap {
    width: min(42vw, 140px);
  }

  .preview-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .marker[data-view="front"]       { top: 8%  !important; left: 50% !important; }
  .marker[data-view="front_left"]  { top: 15% !important; left: 34% !important; }
  .marker[data-view="front_right"] { top: 15% !important; left: 66% !important; }

  .marker[data-view="left"]        { top: 42% !important; left: 24% !important; }
  .marker[data-view="right"]       { top: 42% !important; left: 76% !important; }

  .marker[data-view="rear_left"]   { top: 72% !important; left: 34% !important; }
  .marker[data-view="rear_right"]  { top: 72% !important; left: 66% !important; }
  .marker[data-view="rear"]        { top: 80% !important; left: 50% !important; }
}



/* ============================================================
   INFO-KUPLA
   ============================================================ */
.info-pop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.25rem;
  height:1.25rem;
  border-radius:999px;
  border:1px solid rgba(13,110,253,.35);
  background: rgba(13,110,253,.08);
  color:#0d6efd;
  text-decoration:none;
  cursor:pointer;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.info-pop:hover{ background: rgba(13,110,253,.14); border-color: rgba(13,110,253,.55); }
.info-pop:active{ transform: scale(.96); }

/* Ei jää "aktiiviseksi" */
.info-pop:focus,
.info-pop:active,
.info-pop:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.info-bubble{
  position:absolute;
  min-width: 240px;
  max-width: 420px;
  white-space: normal;
  background:#fff;
  color:#212529;
  border:1px solid rgba(0,0,0,.125);
  border-radius: .75rem;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.18);
  z-index: 3000;
  display:none;
  overflow:hidden;
}
.info-bubble::before{
  content:"";
  position:absolute;
  top:-8px;
  left:18px;
  width:14px;
  height:14px;
  background:#fff;
  border-left:1px solid rgba(0,0,0,.125);
  border-top:1px solid rgba(0,0,0,.125);
  transform: rotate(45deg);
}
.info-bubble .info-body{
  padding:.55rem .6rem .65rem;
  font-size:.92rem;
  line-height:1.25rem;
}
.info-bubble.show{ display:block; }

/* ============================================================
   MEDIAQUERIES
   ============================================================ */
@media (max-width: 991.98px){
  .desktop-nav { display: none !important; }
  header.intra-header .intra-title { font-size: 22px; }
  header.intra-header .logo { width: 64px; }

  .footer-container { flex-direction: column; gap: 0.3rem; }
  .footer-right { gap: 0.3rem; }
  .up-btn { padding: 0.15rem 0.3rem; font-size: 0.8rem; }
  .social-icon { font-size: 1.1rem; }
}
/* ============================================================
   === ON / OFF SWITCH STATUKSEN (HÄLYTETTÄVISSÄ) ===
   ============================================================ */

/* Värit keskitetysti */
:root{
  --alert-on: 40, 180, 120;   /* vihreä */
  --alert-off: 220, 53, 69;   /* punainen */
}

/* “pilleri” */
.alert-pill{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background:rgba(12,14,18,.45);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 8px 22px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:all .25s ease;
  min-height: 42px; /* vakioi headerissä */
}

/* ikoniympyrä */
.alert-dot{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:rgba(var(--alert-off), .25);
  border:1px solid rgba(var(--alert-off), .45);
}

/* teksti */
.alert-label{
  white-space: nowrap;
}

/* switchin wrapper: ei anna sen hypätä */
.alert-pill .form-check{
  display:flex;
  align-items:center;
  margin:0;
}

/* Bootstrap switch koko/linjaus varmaksi headerissä */
.alert-pill .form-switch .form-check-input{
  width: 2.6em;     /* bootstrap oletusluokkaa, mutta varmistetaan */
  height: 1.35em;
  margin-left: .35rem;
  margin-top: 0;
  cursor: pointer;
}

/* yleinen: älä anna bootstrapin “sinisen” tulla kummittelemaan */
.alert-pill .form-check-input{
  box-shadow:none !important;
}

/* ================= ON = VIHREÄ ================= */
.alert-pill.is-on{
  border-color:rgba(var(--alert-on), .65);
  box-shadow:
    0 0 0 1px rgba(var(--alert-on), .20),
    0 0 28px rgba(var(--alert-on), .45),
    0 10px 30px rgba(0,0,0,.55);
}

.alert-pill.is-on .alert-dot{
  background:rgba(var(--alert-on), .28);
  border-color:rgba(var(--alert-on), .6);
}

.alert-pill.is-on .alert-dot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid rgba(var(--alert-on), .40);
  animation:pulse-on 1.6s ease-out infinite;
}

/* ================= OFF = PUNAINEN ================= */
.alert-pill.is-off{
  border-color:rgba(var(--alert-off), .65);
  box-shadow:
    0 0 0 1px rgba(var(--alert-off), .18),
    0 0 18px rgba(var(--alert-off), .30),
    0 10px 30px rgba(0,0,0,.55);
}

.alert-pill.is-off .alert-dot{
  background:rgba(var(--alert-off), .28);
  border-color:rgba(var(--alert-off), .6);
}

.alert-pill.is-off .alert-dot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid rgba(var(--alert-off), .35);
  animation:pulse-off 2.2s ease-out infinite;
}

/* Pulssi-animaatiot */
@keyframes pulse-on{
  0%   { transform:scale(.9);  opacity:0; }
  25%  { opacity:.9; }
  100% { transform:scale(1.15);opacity:0; }
}
@keyframes pulse-off{
  0%   { transform:scale(.95); opacity:0; }
  30%  { opacity:.55; }
  100% { transform:scale(1.10);opacity:0; }
}

.alert-switch{ cursor:pointer; }

/* ============================================================
   FIX: Switchin NUppi (thumb) ei saa muuttua siniseksi/harmaaksi
   - Korvaa Bootstrapin SVG-thumbin väreillä (on/off)
   ============================================================ */

/* OFF-tila: punainen thumb + punainen track */
.alert-pill.is-off .form-check-input,
.alert-pill.is-off .form-check-input:focus,
.alert-pill.is-off .form-check-input:active,
.alert-pill.is-off .form-check-input:checked,
.alert-pill.is-off .form-check-input:checked:focus,
.alert-pill.is-off .form-check-input:checked:active{
  border-color: rgba(var(--alert-off), .90) !important;
  background-color: rgba(var(--alert-off), .55) !important;

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb(220,53,69)'/%3e%3c/svg%3e") !important;
}

/* ON-tila: vihreä thumb + vihreä track */
.alert-pill.is-on .form-check-input,
.alert-pill.is-on .form-check-input:focus,
.alert-pill.is-on .form-check-input:active,
.alert-pill.is-on .form-check-input:checked,
.alert-pill.is-on .form-check-input:checked:focus,
.alert-pill.is-on .form-check-input:checked:active{
  border-color: rgba(var(--alert-on), .85) !important;
  background-color: rgba(var(--alert-on), .60) !important;

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb(40,180,120)'/%3e%3c/svg%3e") !important;
}

/* Focus-kehä tilan mukaan (valinnainen, mutta siisti) */
.alert-pill.is-on  .form-check-input:focus{ box-shadow: 0 0 0 .2rem rgba(var(--alert-on),  .25) !important; }
.alert-pill.is-off .form-check-input:focus{ box-shadow: 0 0 0 .2rem rgba(var(--alert-off), .22) !important; }


/* ===== Varustehallinta: erottele dropdownit ===== */

/* ==== Varastosaldot: luettavuus ==== */

/* PÄÄ (kategoriat) */
.accordion.accordion-main .accordion-item{
  margin-bottom: 10px;                 /* se kaivattu väli */
  border-radius: 12px;
  overflow: hidden;                    /* pyöristys myös headerille */
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* pieni väriraita vasempaan reunaan */
.accordion.accordion-main .accordion-button{
  position: relative;
  padding-left: 18px;
}
.accordion.accordion-main .accordion-button::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: rgba(220, 53, 69, .55); /* punainen raita */
}

/* ALA (tuotteet kategorian sisällä) – kevyempi ja sisennetty */
.accordion.accordion-sub{
  padding: 10px 12px 12px;
}
.accordion.accordion-sub .accordion-item{
  margin-bottom: 8px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.01);
}

.accordion.accordion-sub .accordion-button{
  position: relative;
  padding-left: 16px;
  background: transparent;
}
.accordion.accordion-sub .accordion-button::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(13, 110, 253, .40); /* sininen raita */
}

/* kun sub-accordion auki, älä tee siitä liian värikästä */
.accordion.accordion-sub .accordion-button:not(.collapsed){
  background-color: rgba(13,110,253,.06) !important;
}

/* ilmoittautumisten esitys oikein ajankohtaista sivulla */
.popover {
  max-width: min(320px, calc(100vw - 24px));
}

.popover .popover-body {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 50vh;
  overflow-y: auto;
}

.participant-badge {
  cursor: pointer;
}

/* ==== NAV BADGE (ilmoitukset / tehtävät) ==== */

/* wrapper jotta badge voi olla floating */
.nav-badge-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* perus badge */
.nav-alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    aspect-ratio: 1 / 1;
    box-shadow: 0 0 0 2px #212529;
}

/* floating badge navbarissa */
.nav-alert-badge.is-floating {
    position: absolute;
    top: -6px;
    right: -16px;
    margin-left: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.62rem;
}

/* dropdownin badge (Asemapalvelus) */
.dropdown-item-badge {
    margin-left: auto;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    font-size: 0.56rem;
    box-shadow: none;
}

/* mobiilin badge */
.mobile-link-badge {
    margin-left: 8px;
}

/* dropdown itemit flexiksi että badge menee nätisti oikeaan reunaan */
.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
}

/* ==== FIX: poista punainen "Muuta" nappi (Bootstrap override) ==== */
.desktop-nav .nav-link.dropdown-toggle.show,
.desktop-nav .nav-link.dropdown-toggle:focus,
.desktop-nav .nav-link.dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-radius: .5rem;
}

/* varmistetaan ettei active tila tee punaista blokkia */
.desktop-nav .navbar-nav .nav-link.active,
.desktop-nav .navbar-nav .show > .nav-link {
    background-color: transparent !important;
    color: #fff !important;
}