/* annotations.css — Sottosistema ANNOTAZIONI (pdfeditabile.it).
 *
 * Copre 4 aree (SPECIFICA NORMATIVA §7.4):
 *   1. Overlay SVG per pagina (.annot-layer) + maniglie/anteprima/note sticky.
 *   2. Toolbar annotazioni (.annot-tool attivo, .annot-color).
 *   3. Editor inline per note/freetext (.annot-editor).
 *   4. Pannello laterale "Commenti" (.cmt*, .cmt-empty).
 *
 * Usa i token del design system (--accent, --panel, --panel-2, --border, --text,
 * --text-dim, --danger, --radius) e supporta il tema scuro via [data-theme=dark].
 * NON ridefinisce token globali.
 */

/* =========================================================================
   1. OVERLAY SVG (layer.js)
   ========================================================================= */

/* SVG overlay: riempie il .page-wrap (già dimensionato in px CSS allo scale
   corrente). Inattivo di default per non rubare selezione testo/scroll. */
.annot-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    /* Sopra canvas e textLayer. */
    z-index: 3;
}

/* Armato: un tool è attivo o c'è una selezione → l'overlay cattura il puntatore. */
.annot-layer.is-armed { pointer-events: auto; }

/* Nascosto e inerte quando rotation ≠ 0 (§3.7). */
.annot-layer.is-hidden { display: none; }

/* Cursori per contesto: crosshair durante il disegno di forme/ink. */
.annot-layer.is-armed { cursor: crosshair; }
/* In modalità selezione (nessun tool) il cursore torna a freccia. */
.annot-layer.is-armed.is-select { cursor: default; }
/* Tool di markup testo: cursore testo (la selezione avviene sul textLayer). */
.annot-layer.is-armed.is-markup { cursor: text; }

/* Gruppo annotazione. Selezionabile anche quando il layer non è armato. */
.annot {
    pointer-events: auto;
    cursor: pointer;
}
.annot:hover { cursor: move; }

/* Annotazione selezionata: contorno di enfasi (il tratteggio è nel rect di
   bounding disegnato dal layer; qui rafforziamo con un filtro/opacità). */
.annot.is-selected { cursor: move; }

/* Bounding box tratteggiato per selezione di ink/markup (nessun resize MVP). */
.annot-bbox {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

/* Maniglie di ridimensionamento (8 per i rect, 2 per line/arrow). */
.annot-handle {
    fill: var(--panel);
    stroke: var(--accent);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    cursor: nwse-resize;
}
.annot-handle:hover { fill: var(--accent); }
/* Cursori direzionali (assegnati dal layer via classi opzionali). */
.annot-handle.h-n,  .annot-handle.h-s  { cursor: ns-resize; }
.annot-handle.h-e,  .annot-handle.h-w  { cursor: ew-resize; }
.annot-handle.h-nw, .annot-handle.h-se { cursor: nwse-resize; }
.annot-handle.h-ne, .annot-handle.h-sw { cursor: nesw-resize; }
.annot-handle.h-end { cursor: crosshair; }

/* Anteprima durante il drag di creazione (rettangolo/marquee). */
.annot-marquee {
    fill: var(--accent-weak);      /* era il vecchio blu hardcoded rgba(43,108,255,.12) */
    stroke: var(--accent);
    stroke-width: 1;
    stroke-dasharray: 5 3;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* Icona nota sticky resa nell'SVG (rettangolino colorato con glifo). */
.annot-note-icon {
    cursor: pointer;
    pointer-events: auto;
}
.annot-note-icon rect {
    stroke: rgba(0, 0, 0, .35);
    stroke-width: .5;
}

/* =========================================================================
   2. EDITOR INLINE (note / freetext) — .annot-editor
   ========================================================================= */

/* Textarea/contentEditable posizionato in assoluto sul .page-wrap dal layer. */
.annot-editor {
    position: absolute;
    z-index: 10;
    min-width: 120px;
    min-height: 28px;
    padding: 6px 8px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: 6px;
    box-shadow: var(--shadow);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.35;
    resize: both;
    outline: none;
    overflow: auto;
}
.annot-editor::placeholder { color: var(--text-dim); }

/* Mini-popover di selezione (es. pulsante elimina accanto all'annotazione). */
.annot-popover {
    position: absolute;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow);
}
.annot-popover button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    color: var(--text);
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}
.annot-popover button:hover { background: var(--panel-2); }
.annot-popover button.is-danger:hover { background: var(--danger); color: #fff; }

/* =========================================================================
   3. TOOLBAR ANNOTAZIONI — .annot-tool / .annot-color
   ========================================================================= */

/* Tool attivo: theme-aware via token (niente più assunzione "toolbar sempre
   scura"). In chiaro = tinta accent tenue + bordo accent; in scuro = bianco
   translucido. I token sono definiti in app.css (§2.1). */
.annot-tool.is-active {
    background: var(--control-active-bg);
    border-color: var(--control-active-border);
}

/* Nota: gli strumenti ora sono icone SVG (currentColor), non più glifi
   testuali → rimosso l'hack font-size: 15px sulle .icon-btn del gruppo annot. */

/* Selettore colore = chip neutro con "pallino" tondo del colore scelto
   (swatch circolare), coerente con gli altri controlli della toolbar via
   token. Dimensione allineata alle .icon-btn (~34×34). */
.annot-color {
    width: 32px;
    height: 32px;
    padding: 7px;            /* pallino ~18px in un chip 32 (era ~26 in 34) */
    margin-left: 2px;
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--r-sm);
    cursor: pointer;
}
/* Swatch reso come pallino tondo dentro il chip. */
.annot-color::-webkit-color-swatch-wrapper { padding: 0; }
.annot-color::-webkit-color-swatch {
    border: 1px solid var(--control-border);
    border-radius: 50%;
}
.annot-color::-moz-color-swatch {
    border: 1px solid var(--control-border);
    border-radius: 50%;
}
.annot-color:hover { background: var(--control-bg-hover); }

/* =========================================================================
   4. PANNELLO "COMMENTI" — #panel-comments (.cmt*)
   ========================================================================= */

/* Contenitore del pannello: toolbar persistente + lista scrollabile. */
.cmt-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Header azioni: esporta/importa XFDF + conteggio. */
.cmt-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cmt-btn {
    padding: 5px 9px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.cmt-btn:hover { border-color: var(--accent); }
.cmt-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Ricerca testuale. */
.cmt-search {
    width: 100%;
    padding: 6px 9px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}
.cmt-search:focus { border-color: var(--accent); }
.cmt-search::placeholder { color: var(--text-dim); }

/* Riga filtri/ordinamento. */
.cmt-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cmt-select {
    flex: 1 1 30%;
    min-width: 0;
    padding: 5px 6px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
.cmt-select:focus { border-color: var(--accent); }

.cmt-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Card di una singola annotazione. */
.cmt {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.cmt:hover { border-color: var(--accent); }
.cmt.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(43, 108, 255, .25);
}

/* Intestazione: tipo · pagina · elimina. */
.cmt__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.cmt__type {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.cmt__page {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}
.cmt__del {
    margin-left: auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: var(--text-dim);
    border: none;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.cmt__del:hover { background: var(--danger); color: #fff; }

/* Riga meta: autore · data di creazione. */
.cmt__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-dim);
    min-width: 0;
}
.cmt__author {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmt__date {
    margin-left: auto;
    white-space: nowrap;
}

/* Campione di colore dell'annotazione. */
.cmt__swatch {
    width: 100%;
    height: 6px;
    margin-bottom: 8px;
    border-radius: 3px;
    background: var(--border);
}

/* Testo del commento (editabile). */
.cmt__text {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.35;
    resize: vertical;
    outline: none;
    cursor: text;
}
.cmt__text:focus { border-color: var(--accent); }
.cmt__text::placeholder { color: var(--text-dim); }

/* Stato vuoto (coerente col placeholder dell'outline). */
.cmt-empty {
    margin: 0;
    padding: 8px;
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
}

/* =========================================================================
   Rifiniture tema scuro
   ========================================================================= */

[data-theme="dark"] .annot-marquee { fill: rgba(43, 108, 255, .18); }
[data-theme="dark"] .cmt__swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }