@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* ===========================
   TOKENS / CSS VARIABLES
   =========================== */
:root {
  /* Font */
  --breve-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Colori base */
  --breve-bg: #000000;
  --breve-fg: #ffffff;
  --breve-surface-bg: #050505;

  /* Bordi / separatori */
  --breve-border-strong: rgba(255, 255, 255, 0.40);
  --breve-border-medium: rgba(255, 255, 255, 0.16);
  --breve-border-soft: rgba(255, 255, 255, 0.12);
  --breve-border-softer: rgba(255, 255, 255, 0.06);

  /* Card / glass */
  --breve-card-gradient: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 55%);
  --breve-backdrop-blur: 8px;

  /* Accent & contrast */
  --breve-accent: #ffffff;
  --breve-accent-contrast: #000000;

  --breve-error: #ff7777;
  --breve-error-bg: rgba(255, 77, 77, 0.12);

  /* Warning */
  --breve-warning: #ffb84d;
  --breve-warning-bg: rgba(255, 184, 77, 0.14);

  /* Success (un solo verde per tutto: alert + copy + highlight) */
  --breve-success: #2ecc71;
  --breve-success-bg: rgba(46, 204, 113, 0.12);

  /* Highlight righe tabella */
  --breve-row-success-bg: rgba(46, 204, 113, 0.12);
  --breve-row-success-line: rgba(46, 204, 113, 0.85);

  --breve-row-warning-bg: rgba(255, 149, 0, 0.12);
  --breve-row-warning-line: rgba(255, 149, 0, 0.85);

  --breve-icon-hover-bg: #f3f3f3;

  /* Raggi */
  --breve-radius-pill: 999px;
  --breve-radius-card: 1.25rem;
  --breve-radius-textarea: 1rem;

  /* Transitions */
  --breve-transition-fast: 0.15s ease;
  --breve-transition-snappy: 0.12s ease;
}

/* ===========================
   RESET / BASE
   =========================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--breve-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

*:focus {
  outline: none;
}

/* ===========================
   LAYOUT GENERALE
   =========================== */

.breve-body {
  margin: 0;
  min-height: 100vh;
  background: var(--breve-bg);
  color: var(--breve-fg);
}

.breve-page {
  min-height: 100vh;
}

.breve-shell {
  margin: 0 auto;
  padding: 1rem;
  position: relative;
}

.breve-header {
  margin-bottom: 2.5rem;
}

.breve-title {
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  letter-spacing: 0.03em;
  text-transform: lowercase;
  margin: 0 0 0.5rem;
}

.breve-subtitle {
  font-size: 0.9rem;
  opacity: 0.7;
}

.breve-main {
  display: flex;
  flex-direction: column-reverse;
  gap: 3rem;
}

.breve-links {
  flex: 1.4;
  font-size: 0.9rem;
}

.breve-forms {
  flex: 1;
  position: static;
  top: 2rem;
}


/* ===========================
   SEZIONE LISTA LINK / TABELLA
   =========================== */

.breve-section-title {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 1rem;
  opacity: 0.7;
}

.breve-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.breve-table thead th {
  text-align: left;
  padding: 0.75rem 0.75rem 0.5rem 0.75rem;
  border-bottom: 1px solid var(--breve-border-soft);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.7;
}
.breve-table tbody tr {
  transition: background-color 0.3s ease;

}
.breve-table tbody tr:hover {
  background-color: var(--breve-border-softer);
}

.breve-table tbody td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--breve-border-softer);
  vertical-align: auto;
}

.breve-cell-original {
  max-width: 420px;
  word-break: break-word;
}

.breve-table a {
  color: var(--breve-fg);
  text-decoration: none;
}

.breve-table a:hover {
  border-bottom-color: var(--breve-fg);
}

.breve-row-mobile-details {
  display: none;
}

/* ===========================
   BOTTONI / AZIONI TABELLA
   =========================== */

.breve-delete-button {
  background: transparent;
  color: var(--breve-fg);
  border-radius: var(--breve-radius-pill);
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.breve-delete-button:hover {
  opacity: 0.7;
}
.buttons-actions{
  text-align: end;
}
.breve-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.breve-inline-form {
  display: inline;
  height: 24px
}

.breve-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--breve-radius-pill);
  border: 0;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  transition:
    background var(--breve-transition-fast),
    opacity var(--breve-transition-fast),
    transform var(--breve-transition-fast);
}

.breve-icon-button:hover {
  opacity: 0.7;
}

/* ===========================
   ALERT
   =========================== */

.breve-alert {
  padding: 0.6rem 1.5rem;
  margin-bottom: 0.75rem;
  border-radius: var(--breve-radius-pill);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.breve-alert-error {
  background: var(--breve-error-bg);
  color: var(--breve-error);
}

.breve-alert-info {
  background: var(--breve-success-bg);
  color: var(--breve-success);
}

.breve-alert-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--breve-radius-pill);
  background: currentColor;
}
.breve-alert-warning {
  background: var(--breve-warning-bg);
  color: var(--breve-warning);
}

/* ===========================
   CARD & ACCORDION
   =========================== */

.breve-card {
  border-radius: var(--breve-radius-card);
  border: 1px solid var(--breve-border-soft);
  padding: 1.5rem 1.4rem;
  margin-bottom: 1.2rem;
  background: var(--breve-card-gradient);
  backdrop-filter: blur(var(--breve-backdrop-blur));
}

.breve-card h2 {
  font-size: 1.3rem;
  margin: 0 0 1rem;
}

.breve-card h3 {
  font-size: 1.1rem;
  margin: 1.2rem 0 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.7;
}

.breve-card p {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
}

.breve-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* ogni accordion-item è come una card */
.breve-accordion-item {
  border-radius: var(--breve-radius-card);
  border: 1px solid var(--breve-border-medium);
  background: var(--breve-card-gradient);
  backdrop-filter: blur(var(--breve-backdrop-blur));
  padding: 0;
  overflow: hidden;
}

/* togli la freccina di default */
.breve-accordion-item > summary {
  list-style: none;
}

.breve-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.breve-accordion-header::-webkit-details-marker {
  display: none;
}

.breve-accordion-icon {
  font-size: 1.2rem;
  opacity: 0.7;
}

/* Icona accordion */
.breve-accordion-icon::after {
  content: "+";
  font-size: 1.4rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: inline-block;
}

/* Quando <details> è aperto → cambia icona */
.breve-accordion-item[open] .breve-accordion-icon::after {
  content: "−";
}

/* corpo dell'accordion */
.breve-accordion-body {
  margin-top: 0.3rem;
  padding: 0.3rem 1.4rem 1.4rem 1.4rem;
  border-top: 1px solid var(--breve-border-soft);
}

.breve-accordion-subtitle {
  font-size: 0.9rem;
  margin: 0.7rem 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.7;
}

.breve-accordion-hint {
  opacity: 0.7;
  font-size: 0.9rem;
  margin: 0.2rem 0 0.5rem;
}

/* ===========================
   FORM & INPUT
   =========================== */

.breve-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.breve-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.7;
  display: block;
  margin-bottom: 0.25rem;
}

/* Griglie per i campi del form vCard */
.breve-grid {
  display: grid;
  gap: 0.75rem 0.75rem;
}

.breve-grid-2 {
  grid-template-columns: 1fr;
}

.breve-grid-3 {
  grid-template-columns: 1fr;
}

.breve-input,
.breve-textarea {
  width: 100%;
  background: var(--breve-surface-bg);
  border-radius: var(--breve-radius-pill);
  border: 1px solid var(--breve-border-medium);
  color: var(--breve-fg);
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  outline: none;
}

.breve-textarea {
  border-radius: var(--breve-radius-textarea);
  resize: vertical;
  min-height: 90px;
  font-family: inherit;
}

.breve-input:focus,
.breve-textarea:focus {
  border-color: var(--breve-accent);
}

/* Bottoni */
.breve-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--breve-radius-pill);
  background: var(--breve-accent);
  color: var(--breve-accent-contrast);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid var(--breve-border-strong);
}

.breve-button:hover {
  filter: brightness(0.9);
}

.login-button {
  margin-top: 1rem;
}

.breve-button-secondary {
  background: transparent;
  color: var(--breve-fg);
  border: 1px solid var(--breve-border-strong);
}

/* ===========================
   PREVIEW SHORTLINK
   =========================== */

.breve-short-preview {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.breve-short-preview a {
  color: var(--breve-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--breve-border-strong);
}

.breve-short-preview a:hover {
  border-bottom-color: var(--breve-fg);
}

/* ===========================
   LOGGED-OUT STATE
   =========================== */

.breve-loggedout {
  text-align: center;
  padding: 4rem 1.5rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.breve-out {
  /* placeholder se vuoi aggiungere altro */
}

.breve-login-link {
  color: var(--breve-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--breve-border-strong);
}

.breve-login-link:hover {
  border-bottom-color: var(--breve-fg);
}

/* ===========================
   COPY ICON
   =========================== */

.breve-short-with-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.breve-copy-icon {
  font-size: 0.95rem;
  transition:
    opacity var(--breve-transition-fast),
    transform var(--breve-transition-fast);
  user-select: none;
  cursor: pointer;
  position: relative;
  top: -1px;
  left: -2px;
}

.breve-copy-icon:hover {
  transform: scale(1.15);
}

/* stato “copiato” */
.breve-copy-icon.copied {
  color: var(--breve-success);
  transform: scale(1.25);
}

/* ===========================
   QR & BARCODE PREVIEW TOOLTIP
   =========================== */

.breve-qr-wrapper {
  position: relative;
  display: inline-block;
}

.breve-qr-preview {
  position: absolute;
  z-index: 10;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--breve-accent);
  padding: 0.8rem;
  border-radius: 0.4rem;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s ease-out,
    transform 0.15s ease-out;
  width: 146px;
  height: 145px;
}

.breve-qr-preview img {
  display: block;
  width: 120px;
  height: 120px;
}

.breve-qr-wrapper:hover .breve-qr-preview {
  opacity: 1;
  transform: translateX(-50%) translateY(0.1rem);
}
.breve-qr-preview--barcode {
  padding: 0.2rem 0.6rem;
  background: #fff;
  width: 220px;
  height: 166px;
}

.breve-qr-preview--barcode img {
  display: block;
  width: 220px;
  height: auto;
}

/* ===========================
   USERBAR + LOGOUT
   =========================== */

/* Barra utente in alto */
.breve-userbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--breve-radius-pill);
  border: 1px solid var(--breve-border-soft);
  background: var(--breve-card-gradient);
  backdrop-filter: blur(var(--breve-backdrop-blur));
  font-size: 0.9rem;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
}


/* Email + ruolo */
.breve-userbar-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  max-width: 65%;
}

.breve-user-email {
  font-weight: 600;
}

.breve-user-role {
  opacity: 0.7;
  font-size: 0.75rem;
}

/* Contenitore a destra (logout) */
.breve-userbar-right {
  display: flex;
  align-items: center;
}

/* Bottone logout stile pillola */
.breve-logout-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--breve-radius-pill);
  border: 1px solid var(--breve-border-strong);
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  letter-spacing: 0.12rem;
  transition:
    background var(--breve-transition-fast),
    color var(--breve-transition-fast),
    border-color var(--breve-transition-fast),
    transform var(--breve-transition-snappy),
    opacity var(--breve-transition-snappy);
}

/* Piccola icona per dare feedback (opzionale) */
.breve-logout-link::before {
  content: "⟲";
  font-size: 1.2rem;
  position: relative;
  top: 0;
}

/* Hover stato */
.breve-logout-link:hover {
  background: var(--breve-accent);
  color: var(--breve-accent-contrast);
  border-color: var(--breve-accent);
  opacity: 1;
}

/* ===========================
   UTILITIES / HELPER
   =========================== */

/* Messaggio "nessun shortlink" */
.breve-empty-state {
  opacity: 0.6;
  font-size: 0.9rem;
}

/* Sottotitolo con extra spazio sotto (login) */
.breve-subtitle--spaced {
  margin-bottom: 1.5rem;
}

/* Card con margine extra (ultimo shortlink) */
.breve-card--spaced {
  margin-bottom: 1.8rem;
}

/* Alert con margine inferiore più ampio (login) */
.breve-alert--spaced {
  margin-bottom: 1rem;
}

/* Wrapper per i campi del form login */
.breve-field-row {
  margin-bottom: 0.85rem;
}

/* Testo di aiuto sotto al form login */
.breve-login-help {
  margin-top: 1rem;
  font-size: 0.85rem;
  opacity: 0.7;
}
.truncate {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ===========================
   EDIT POPOVER (inline edit senza rompere layout)
   =========================== */

.breve-edit {
  position: relative;
  display: inline-flex;
}

/* rimuove marker details */
.breve-edit > summary {
  list-style: none;
}
.breve-edit > summary::-webkit-details-marker {
  display: none;
}

/* contenitore popover */
.breve-edit-popover {
  position: absolute;
  z-index: 50;
  bottom: calc(100% + 19px);
  width: 280px;
  right: -40px; /* piccolo offset per non uscire */
  padding: 0.65rem;
  border-radius: 1rem;
  border: 1px solid var(--breve-border-medium);
  background: var(--breve-card-gradient);
  backdrop-filter: blur(var(--breve-backdrop-blur));
  box-shadow: 0 12px 28px rgba(0,0,0,0.55);
  /* hidden di default: lo gestiamo con details[open] */
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--breve-transition-fast), transform var(--breve-transition-fast);
}

/* freccina */
.breve-edit-popover::after {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  right: 15px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--breve-surface-bg);
  border-right: 1px solid var(--breve-border-medium);
  border-bottom: 1px solid var(--breve-border-medium);
}

/* quando è aperto */
.breve-edit[open] .breve-edit-popover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* layout form */
.breve-edit-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* input compatto stile tuo */
.breve-edit-input {
  flex: 1;
  background: var(--breve-surface-bg);
  border-radius: var(--breve-radius-pill);
  border: 1px solid var(--breve-border-medium);
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
}

.breve-edit-input:focus {
  border-color: var(--breve-accent);
}

/* bottone salva piccolo */
.breve-edit-save {
  width: 2rem;
  height: 2rem;
  border-radius: var(--breve-radius-pill);
  border: 1px solid var(--breve-border-strong);
  background: var(--breve-accent);
  color: var(--breve-accent-contrast);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--breve-transition-fast), filter var(--breve-transition-fast);
}

.breve-edit-save:hover {
  filter: brightness(0.92);
}
.breve-edit-save span{
  position: relative;
  top: -2px;
}
/* se la tabella ha overflow nascosto da qualche parte, aiuta */
.breve-table,
.breve-table td {
  overflow: visible;
}

/* Evidenzia riga (es. URL già esistente / appena creato) */
.breve-row-highlight td {
  transition: background var(--breve-transition-fast), border-color var(--breve-transition-fast);
}

.breve-row-highlight-success td {
  background: var(--breve-row-success-bg);
  border-bottom-color: rgba(46, 204, 113, 0.25);
}
.breve-row-highlight-success td:first-child {
  box-shadow: inset 3px 0 0 var(--breve-row-success-line);
}

.breve-row-highlight-warning td {
  background: var(--breve-row-warning-bg);
  border-bottom-color: rgba(255, 149, 0, 0.25);
}
.breve-row-highlight-warning td:first-child {
  box-shadow: inset 3px 0 0 var(--breve-row-warning-line);
}

.breve-last-row{
  display:flex;
  align-items:center;
  gap:0.6rem;
  flex-wrap:wrap;
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
}
.breve-last-original{
  opacity:0.9;
  border-bottom: 1px solid var(--breve-border-strong);
  padding-bottom: 1px;
}
.breve-last-arrow{
  opacity:0.5;
}

.breve-icon-button svg,
.breve-delete-button svg {
  width: 25px;
  height: 25px;
  display: block;
}

.breve-icon-button span,
.breve-delete-button span {
  width: 25px;
  height: 25px;
  display: block;
} 

.breve-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition:
    background var(--breve-transition-fast),
    opacity var(--breve-transition-fast),
    transform var(--breve-transition-fast);
}

.breve-edit-tags .breve-icon-button{
  background-color: var(--breve-fg);
  border-radius: 1rem;
  color: var(--breve-bg);
  text-align: center;
  font-size: 1rem;
  line-height: 25px;
  font-weight: 700;
}

.breve-faq-list {
  display: grid;
  gap: 1.25rem;
}

.breve-faq-item p {
  margin: 0.4rem 0 0;
}

.breve-faq-list-ul {
  margin: 0.6rem 0;
  padding-left: 1.2rem;
}

.breve-faq-list-ul li {
  margin: 0.2rem 0;
}

.breve-faq-item code {
  word-break: break-all;
}

/* ===========================
   TAGS
   =========================== */

.breve-type-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 8px;
}

.breve-type-filter {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--breve-bg);
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  transition: 0.18s ease;
  opacity: 0.72;
  background: #444;
}

.breve-type-filter:hover {
  opacity: 1;
}

.breve-type-filter.is-active {
  opacity: 1;
  background: #888;
  color: #fff;
  border-color: #888;
}

.breve-tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 12px;
}

.breve-tag-filter {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  color: var(--breve-bg);
  transition: 0.18s ease;
}

.breve-tag-filter:hover {
  border-color: #bbb;
  background: #f7f7f7;
}

.breve-tag-filter.is-active {
  border-color: #111;
  background: #f3f3f3;
  font-weight: 600;
}

.breve-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.breve-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 4px 1px 10px;
  border-radius: 999px;
  background: #f3f3f3;
  font-size: 12px;
  line-height: 1.4;
  color: var(--breve-bg);
}

.breve-tag-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0 2px;
  margin: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  position: relative;
  top: -1px;
  opacity: 0.65;
}

.breve-tag-remove:hover {
  opacity: 1;
}