/* --- PAGINA ASSET CARD -------------------------------------------------- */


.page-asset-card{
  padding: 0.9rem 1.5rem 1rem;
  background: #f3f4f6;
  color: #020617;

  /* riempi lo spazio sotto la topbar */
  height: calc(100vh - 60px);
  box-sizing: border-box;

  /* niente scrollbar di pagina */
  overflow: hidden;
}


.asset-card-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto;
  gap: 0.9rem;
  align-items: stretch;

  height: 100%;
  min-height: 0;      /* IMPORTANTISSIMO: evita overflow fantasma */
  overflow: hidden;   /* niente scrollbar esterna */
}

.asset-card-table-panel{
  display: flex;
  flex-direction: column;
  min-height: 0;     /* IMPORTANTISSIMO */
  overflow: hidden;  /* scroll solo dentro la tabella */
}

.asset-card-table{
  flex: 1 1 auto;
  min-height: 0;     /* IMPORTANTISSIMO */
  overflow: auto;    /* ✅ qui compare lo scroll solo se serve */
}

.asset-card-preview{
  height: 100%;
  min-height: 0;
  overflow: auto;
}




.asset-card-preview {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 22px rgba(15,23,42,0.18);
  max-width: 620px;
  justify-self: end;  /* la spinge a destra */
}



.asset-card-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.asset-card-table-header h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #020617;
}

.asset-card-preview-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

  .asset-card-panel h2 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #020617;
  }

  .asset-card-panel p.asset-sub {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    color: #4b5563;
  }

  .asset-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.7rem;
  }

  .asset-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    font-size: 0.78rem;
  }

  .asset-form-row label {
    font-weight: 500;
    color: #111827;
  }

  .asset-form-row small {
    font-size: 0.7rem;
    color: #6b7280;
  }

  .asset-form-row input,
  .asset-form-row select {
    border-radius: 0.55rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    font-size: 0.78rem;
    padding: 0.32rem 0.5rem;
    outline: none;
    height: 2rem;
  }

  .asset-form-row input:focus,
  .asset-form-row select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37,99,235,0.35);
  }

  .asset-form-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: center;
    font-size: 0.76rem;
  }

  .asset-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  cursor: pointer;
  user-select: none;
  font-size: 0.78rem;
}

/* colore del check */
.asset-toggle input {
  accent-color: #16a34a;          /* verde quando selezionato */
}

/* testo grigio quando non spuntato */
.asset-toggle input:not(:checked) + span {
  color: #6b7280;
}

/* testo più marcato quando spuntato */
.asset-toggle input:checked + span {
  color: #15803d;
  font-weight: 500;
}


  .asset-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    border: 1px dashed #cbd5f5;
    font-size: 0.74rem;
    cursor: pointer;
    background: #eef2ff;
    color: #1e293b;
  }

  .asset-section-pill input {
    accent-color: #2563eb;
  }

  .asset-card-actions {
    margin-top: 0.6rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
  }

  .btn-outline {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    font-size: 0.78rem;
    cursor: pointer;
  }

  .btn-primary-pill {
    padding: 0.32rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #2563eb;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #f9fafb;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
  }

  .btn-primary-pill:active {
    transform: translateY(1px);
  }

    .asset-card-preview h3 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111827;
  }
  
    .asset-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
  }

    .asset-wallet-settings {
  margin-top: 0.4rem;         /* prima 0.7: le avviciniamo alle card */
  max-width: 560px;           /* 2 card da 260 + gap */
  margin-left: auto;
  margin-right: auto;         /* centrata sotto le card */
}


  .asset-wallet-settings h4 {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #111827;
  }

  .asset-wallet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .asset-wallet-col-title {
    font-size: 0.74rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
  }

  .asset-wallet-col {
    font-size: 0.75rem;
  }

  @media (max-width: 1200px) {
    .asset-wallet-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 900px) {
    .asset-wallet-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }


  .btn-primary-small {
    padding: 0.2rem 0.75rem;
    font-size: 0.72rem;
    border-radius: 999px;
  }


  /* Fronte+retro affiancati, verticali come nel Wallet */
  .asset-card-preview-stack {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  justify-content: center;      /* CENTRA le due card nel pannello */
  align-items: flex-start;
}



  .asset-card-front,
  .asset-card-back {
    width: 260px;                /* proporzione verticale 2:3 circa */
    height: 410px;
    border-radius: 1.4rem;
    padding: 0.9rem 1rem;
    background: radial-gradient(circle at top left,#172554 0,#020617 55%,#000 100%);
    color: #f9fafb;
    position: relative;
    overflow: hidden;
  }

  /* Varianti colore per ruolo ------------------------------------------- */
  .asset-card-front.role-owner,
  .asset-card-back.role-owner {
    background: #051b4d;
  }

  .asset-card-front.role-tenant,
  .asset-card-back.role-tenant {
    background: #064e3b;
  }

  .asset-card-front.role-maintainer,
  .asset-card-back.role-maintainer {
    background: #7c2d12;
  }

  .asset-card-front.role-guest,
  .asset-card-back.role-guest {
  background: #4c1d95;   /* viola / guest */
}


  .asset-card-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .asset-card-brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
  }

  .asset-card-logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .asset-card-logo span {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .asset-card-logo-img {
    width: 80px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(15,23,42,0.7));
  }

  .hidden {
    display: none !important;
  }

  .asset-card-badge {
    font-size: 0.7rem;
    padding: 0.18rem 0.52rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.85);
    background: rgba(15,23,42,0.86);
  }

  .asset-card-holder {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    font-weight: 500;
  }

  .asset-card-meta {
    margin-top: 0.2rem;
    font-size: 0.76rem;
    color: #d1d5db;
  }

  .asset-card-meta span + span::before {
    content: "•";
    margin: 0 0.25rem;
    opacity: 0.7;
  }

  .asset-card-validity {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: #9ca3af;
  }

 .asset-card-qr {
  margin-top: auto;
  width: 120px;
  height: 120px;
  border-radius: 0.9rem;
  background: #ffffff;
  border: 4px solid rgba(15,23,42,0.8);
  object-fit: cover;
}


  .asset-card-hint {
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: #e5e7eb;
  }
  
  .asset-card-qr-wrap {
  margin-top: auto;                 /* spinge il blocco in basso nella card */
  display: flex;
  flex-direction: column;
  align-items: center;              /* centra QR e testo orizzontalmente */
  gap: 0.25rem;
}

.asset-card-qr {
  width: 120px;
  height: 120px;
  border-radius: 0.9rem;
  background: #ffffff;
  border: 4px solid rgba(15,23,42,0.8);
  object-fit: cover;
}

.asset-card-hint {
  font-size: 0.7rem;
  color: #e5e7eb;
  text-align: center;               /* testo centrato sotto al QR */
}


  .asset-card-back h4 {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e5e7eb;
  }

  .asset-card-back-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.76rem;
}

.asset-card-back-list li {
  margin: 0.10rem 0;
  position: relative;
  padding-left: 0.95rem;
}

.asset-card-back-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.95;
}

/* livello 1 (immobili dentro complesso / unità dentro immobile quando non c’è complesso) */
.asset-card-back-list li.ac-asset-lvl-1 {
  padding-left: 1.55rem;
}
.asset-card-back-list li.ac-asset-lvl-1::before {
  content: "◦";
  left: 0.75rem;
}

/* livello 2 (unità dentro immobile dentro complesso) */
.asset-card-back-list li.ac-asset-lvl-2 {
  padding-left: 2.15rem;
}
.asset-card-back-list li.ac-asset-lvl-2::before {
  content: "–";
  left: 1.50rem;
}


  .asset-card-sections {
    margin-top: 0.45rem;
    font-size: 0.72rem;
    color: #d1d5db;
  }

  .asset-card-sections span {
    display: inline-block;
    margin-right: 0.2rem;
  }

  /* Storico card: più compatto, ma sempre nella pagina ------------------- */

  .asset-card-table {
    margin-top: 0.7rem;
  }

  .asset-card-table h3 {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111827;
  }

  .asset-card-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
    background: #ffffff;
    border-radius: 0.8rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
  }

  .asset-card-table thead {
    background: #e5e7eb;
  }

  .asset-card-table th,
  .asset-card-table td {
    padding: 0.3rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
  }

  .asset-card-table tbody tr:last-child td {
    border-bottom: none;
  }

  .asset-card-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    border: 1px solid rgba(148,163,184,0.7);
  }

  .asset-status-attiva {
    background: rgba(22,163,74,0.14);
    border-color: rgba(34,197,94,0.8);
    color: #166534;
  }

  .asset-status-sospesa {
    background: rgba(234,179,8,0.12);
    border-color: rgba(234,179,8,0.9);
    color: #854d0e;
  }

  .asset-status-revocata {
    background: rgba(248,113,113,0.16);
    border-color: rgba(248,113,113,0.95);
    color: #7f1d1d;
  }

  .asset-card-status-select {
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.6);
    background: #ffffff;
    color: #111827;
    font-size: 0.7rem;
    padding: 0.12rem 0.4rem;
  }

  .asset-card-table-tools {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.asset-card-search {
  min-width: 180px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  outline: none;
}

.asset-card-search:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.35);
}


  /* Lista asset più bassa (sta nella pagina) ---------------------------- */

    .asset-asset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .asset-asset-list {
    border-radius: 0.6rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    padding: 0.25rem 0.3rem;
    display: flex;
    flex-direction: column;
    height: 140px;
  }

  .asset-asset-col-title {
    font-size: 0.74rem;
    font-weight: 600;
    color: #4b5563;
    margin: 0 0 0.2rem;
    flex-shrink: 0;
  }

  .asset-asset-col-body {
    flex: 1;
    overflow: hidden;
  }

  .asset-asset-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.15rem;
    font-size: 0.76rem;
    border-radius: 0.45rem;
    cursor: pointer;
  }

  .asset-asset-row:hover {
    background: #e5f0ff;
  }


  .asset-asset-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .asset-asset-scope {
    font-size: 0.7rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    color: #111827;
    padding: 0.08rem 0.35rem;
  }

  .asset-empty {
    font-size: 0.76rem;
    color: #6b7280;
    padding: 0.25rem 0.2rem;
  }

  @media (max-width: 1024px) {
    .asset-card-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Preview sola lettura (canali / funzioni / sezioni) */
.asset-wallet-settings .asset-toggle,
.asset-wallet-settings .asset-section-pill {
  pointer-events: none;       /* niente click */
}

.asset-wallet-settings input[disabled] {
  cursor: default;
  opacity: 0.9;
}

/* Header tabella con ricerca */
.asset-card-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-bottom: 0.5rem;
}

.asset-card-table-tools {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.asset-card-search {
  min-width: 190px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  padding: 0.28rem 0.8rem;
  font-size: 0.78rem;
  outline: none;
}

.asset-card-search:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.35);
}

/* Riga selezionata */
.asset-card-table tbody tr.ac-row-selected {
  background: #e5f0ff;
}

.asset-card-table tbody tr.ac-row-selected td {
  border-bottom-color: #bfdbfe;
}

/* Più aria ai pulsanti */
.btn-primary-small {
  padding: 0.25rem 0.9rem;
  font-size: 0.75rem;
}

.asset-card-preview-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.asset-card-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
}


  
  /* Modale Asset Card -------------------------------------------------------- */

.ac-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.ac-modal.hidden {
  display: none !important;
}

.ac-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.55);
}

.ac-modal-dialog {
  position: relative;
  background: #ffffff;
  border-radius: 1rem;
  padding: 0.9rem 1.1rem 1rem;
  width: min(1040px, 96vw);      /* più larga */
  max-height: none;              /* niente limite verticale interno */
  overflow: visible;             /* niente scrollbar interna */
  box-shadow: 0 24px 60px rgba(15,23,42,0.45);
}


.ac-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.ac-modal-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.ac-modal-close {
  border: none;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.ac-modal-subtitle {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ac-modal-body {
  font-size: 0.8rem;
}
/* Footer della modale: pulsanti allineati a destra */
.ac-modal-footer {
  margin-top: 0.9rem;           /* spazio sopra i bottoni */
  padding-top: 0.75rem;         /* respiro verticale */
  border-top: 1px solid #e5e7eb;
}

.ac-modal-actions {
  display: flex;
  justify-content: flex-end;    /* tutti a destra */
  align-items: center;
  gap: 0.6rem;                  /* spazio tra i bottoni */
}


/* Footer modale: sinistra (danger) + destra (azioni) */
.ac-modal-footer-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ac-modal-footer-left{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* già esiste, ma qui lo rendiamo “gruppo destro” */
.ac-modal-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex: 1 1 auto;
}

/* opzionale: dimensione uniforme dei tre bottoni */
.ac-modal-actions .btn,
.ac-modal-actions .btn-danger,
.ac-modal-actions .btn-primary-pill {
  min-width: 120px;
  justify-content: center;
}

/* Highlight pulsanti pagina Asset Card */
.page-asset-card .btn-primary-pill,
.page-asset-card .btn-outline,
.page-asset-card .btn-primary-small {
  transition:
    box-shadow 0.12s ease,
    transform 0.06s ease,
    background-color 0.12s ease;
}

.page-asset-card .btn-primary-pill:hover,
.page-asset-card .btn-outline:hover,
.page-asset-card .btn-primary-small:hover {
  box-shadow: 0 0 0 1px rgba(37,99,235,0.55),
              0 8px 18px rgba(15,23,42,0.18);
  transform: translateY(-1px);
}

.page-asset-card .btn-primary-pill:active,
.page-asset-card .btn-outline:active,
.page-asset-card .btn-primary-small:active {
  transform: translateY(0);
  box-shadow: 0 0 0 1px rgba(37,99,235,0.5);
}

.page-asset-card .btn-primary-pill:focus-visible,
.page-asset-card .btn-outline:focus-visible,
.page-asset-card .btn-primary-small:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}


/* Bottone rosso "Elimina card" */
.btn-danger {
  padding: 0.32rem 0.9rem;
  border-radius: 999px;
  border: 1px solid #dc2626;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fef2f2;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease;
}

.btn-danger:hover {
  box-shadow: 0 6px 18px rgba(185, 28, 28, 0.45);
}

.btn-danger:active {
  transform: translateY(1px);
}

/* Righe della tabella cliccabili con manina */
.asset-card-table tbody tr {
  cursor: pointer;
}

/* Modale di conferma eliminazione */
.ac-confirm {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-confirm.hidden {
  display: none;
}

.ac-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.ac-confirm-dialog {
  position: relative;
  background: #ffffff;
  padding: 1rem 1.2rem;
  border-radius: 0.9rem;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.4);
  max-width: 360px;
  width: 90%;
  font-size: 0.82rem;
}

.ac-confirm-dialog h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.ac-confirm-dialog p {
  margin: 0 0 0.8rem;
}

.ac-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.acm-asset-body-list {
  max-height: 150px;
  overflow-y: auto;
}

.acm-asset-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
  border-radius: 0.35rem;
  cursor: pointer;
}

.acm-asset-row:hover {
  background: #eef2ff;
}

.acm-asset-row input[type="checkbox"] {
  margin: 0;
}

/* Asset Card modal: cornice "Immobili" come Complessi/Unità */
.ac-modal-assets-col{
  border-radius: 0.6rem;
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: 0.25rem 0.3rem;
  display: flex;
  flex-direction: column;
  height: 140px; /* uguale a .asset-asset-list */
}

/* Il contenuto (checkbox) deve scrollare solo se serve */
.ac-modal-assets-list{
  overflow: auto;   /* override di .asset-asset-col-body { overflow: hidden; } */
  min-height: 0;
}