/* Shared visual components
   Extracted from index.html to keep PWA visual ownership explicit. */

.row-compact{margin-top:var(--space-3)}
.row-spaced{margin-top:var(--space-5)}
.section-spaced{margin-top:var(--space-6)}
.inline-actions{display:flex; gap:var(--space-3)}
.push-actions{margin-left:auto;display:flex;gap:var(--space-3)}
.stack-gap-sm{display:flex; flex-direction:column; gap:var(--space-5)}
.debug-token-pre{white-space:pre-wrap;word-break:break-word;background:#f9fafb;padding:var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}

.cuidare-icon{
  display:inline-block;
  width:1.25em;
  height:1.25em;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--cuidare-icon-url) center / contain no-repeat;
  mask:var(--cuidare-icon-url) center / contain no-repeat;
}
.cuidare-icon[data-icon=""]{
  display:none;
}
.tracking-status-title .cuidare-icon{
  width:1.2em;
  height:1.2em;
}

.btn.danger{
  background:var(--color-danger);
  border-color:var(--color-danger);
  color:var(--text-inverse);
}
.btn.danger:disabled{
  background:var(--color-danger-border);
  border-color:var(--color-danger-border);
  color:#7f1d1d;
  cursor:not-allowed;
}
.modal-backdrop{
  position:fixed;
  inset:0;
  background:var(--overlay-scrim);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-6);
  z-index:120;
}
.modal-backdrop.hidden{
  display:none;
}
.modal-card{
  width:min(520px, 100%);
  background:var(--surface-card);
  border-radius:var(--radius-3xl);
  border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-modal);
  padding:var(--space-8);
}
.modal-card h3{
  margin:0 0 var(--space-4) 0;
}
.modal-card p{
  margin:0;
  color:#4b5563;
  line-height:1.5;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:var(--space-3);
  margin-top:var(--space-7);
}
.image-crop-card{
  width:min(760px, 100%);
  padding:var(--space-7);
}
.image-crop-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-5);
  margin-bottom:var(--space-control-x);
}
.image-crop-copy{
  margin-top:6px;
  color:#4b5563;
  line-height:1.45;
}
.image-crop-stage{
  position:relative;
  width:100%;
  min-height:320px;
  max-height:min(65vh, 560px);
  background:#0f172a;
  border-radius:var(--radius-2xl);
  overflow:hidden;
}
.image-crop-stage img{
  display:block;
  max-width:100%;
}
.image-crop-note{
  margin-top:12px;
  color:var(--text-subtle);
  font-size:var(--font-size-sm);
  line-height:1.45;
}
@media (max-width: 840px){
  .link-info-grid{
    grid-template-columns:1fr;
  }
  .link-info-editable{
    flex-direction:column;
    align-items:stretch;
  }
  .link-info-edit-actions,
  .link-info-inline-actions{
    justify-content:stretch;
  }
  .link-info-edit-actions .btn,
  .link-info-inline-actions .btn{
    width:100%;
  }
  .modal-actions{
    flex-direction:column-reverse;
  }
  .modal-actions .btn{
    width:100%;
  }
  .image-crop-header{
    flex-direction:column;
  }
  .image-crop-stage{
    min-height:260px;
  }
}