/* === TurtleTask Vue komponenter – fælles layout === */

/* Regler gælder for ALLE komponentbokse, både originale og -2 kopier */
[id^="vue-box-"] {
  text-align: center;
  color: #fff;
}

/* Alle flex-containere i disse bokse */
[id^="vue-box-"] .tt-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Alle knapikoner */
[id^="vue-box-"] .tt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
[id^="vue-box-"] .tt-icon-btn img {
  display: block;
  width: 26px;
  height: 26px;
}

/* Fejlbeskeder */
[id^="vue-box-"] .tt-error-msg {
  padding: 6px 10px;
  margin-top: 4px;
  background-color: #e78668;
  color: #fff;
}

/* Inputs */
[id^="vue-box-"] .custom-input {
  background-color: #498e98;
  border: 2px solid #008484;
  line-height: 1.8;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  margin-bottom: 8px;
  border-radius: 20px;
  padding: 4px 10px;
  text-align: center;
  color: #fff;
  box-shadow:
    0 3px 1px -2px rgba(0,0,0,0.2),
    0 2px 2px 0 rgba(0,0,0,0.14),
    0 1px 5px 0 rgba(0,0,0,0.12);
  opacity: 1;
}
[id^="vue-box-"] .custom-input::placeholder {
  color: #fff;
  opacity: 0.7;
}
[id^="vue-box-"] .custom-input:focus {
  outline: none;
}

/* Fjern bundmargin så input og knap står tæt */
[id^="vue-box-"] .custom-input {
  margin-bottom: 0;
}