/* -------------------------------------------------------------------
   1. Ascunde tot până când Vue e gata și afișează spinner-ul
   ------------------------------------------------------------------- */
[v-cloak] {
  position: relative;
  min-height: 200px;
  overflow: hidden;
}
[v-cloak] > * {
  visibility: hidden;
}
[v-cloak]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 0.25rem solid rgba(0,0,0,0.1);
  border-top-color: rgba(59,130,246,1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------
   2. Coloană unică pe mobil, două (250px + rest) de la 768px în sus
   --------------------------------------------------------------- */
#app {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  #app {
    grid-template-columns: 250px 1fr;
  }
}

/* ----------------------------------------------------------------
   3. Spațiu mai mare între carduri pe desktop și sticky sidebar
   ---------------------------------------------------------------- */
@media (min-width: 768px) {
  section > .space-y-6 > * + * {
    margin-top: 2rem; /* în loc de 1.5rem implicit */
  }
  main > aside {
    position: sticky;
    top: 1rem;
  }
  section {
    padding-left: 1rem;
  }
}

/* ------------------------------------------------------
   4. Personalizare arrow pe <select> în sidebar
   ------------------------------------------------------ */
aside select {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6H0z' fill='%236B7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

/* ------------------------------------------------------
   5. Rupere de cuvinte pentru filtre lungi
   ------------------------------------------------------ */
.break-words {
  word-break: break-word;
}

/* ------------------------------------------------------
   6. Padding consistent pe mobil ca să nu iasă din ecran
   ------------------------------------------------------ */
@media (max-width: 767px) {
  main.container {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------
   7. Previne overflow orizontal (în caz că mai există)
   ------------------------------------------------------ */
body {
  overflow-x: hidden;
}