/*
 * annotation-layer.css
 * MA-PRO File Viewer — SVG Annotation Layer (Phase 2)
 *
 * Styly pro anotační vrstvu postavenou čistě na nativním SVG.
 *
 * ⛔  ZÁKAZ hardcoded barev:
 *     Veškeré UI používá VÝHRADNĚ CSS proměnné Theme Enginu.
 *     Povolené tokeny:
 *       --card-bg, --text-main, --text-muted, --border-color,
 *       --brand-primary, --brand-primary-rgb, --brand-primary-hover,
 *       --hover-bg, --color-danger, --radius-*, --shadow-*, --font-size-*
 *
 * Sections:
 *   1. Shared annotation wrapper (#annotationContentWrapper)
 *   2. SVG overlay (#annotationSvg)
 *   3. SVG rectangle annotation elements (.annotation-rect)
 *   4. Floating editor card (#annotationEditor)
 *   5. Annotation toggle button (#annotationToggleBtn)
 */


/* =========================================================================
   1. SHARED ANNOTATION WRAPPER
   Acts as position: relative context for both the SVG overlay and the
   floating editor card. The <img> or <canvas> lives inside this wrapper,
   so canvas + SVG scroll as one unit.
   ========================================================================= */

#annotationContentWrapper {
    position: relative;
    display: none;       /* hidden by default — JS shows it when mode activates */

    /*
     * CRITICAL: use fit-content so the wrapper shrinks to the actual rendered
     * image / PDF-canvas width.  With width:100% the wrapper spans the full
     * offcanvas width (e.g. 1200 px) while a portrait image may only be 500 px
     * wide (centred via margin:auto).  The SVG is positioned at top:0/left:0
     * and sized to imageEl.clientWidth × clientHeight — if the wrapper is wider
     * than the image, the SVG starts at left:0 (not at the image left edge),
     * leaving blank space where users could draw annotations off-image.
     *
     * With fit-content: wrapper width = image rendered width = SVG width → the
     * SVG overlays exactly and only the visible image pixels.  overflow:hidden
     * clips resize-handles that are dragged past the image boundary.
     */
    width: fit-content;
    max-width: 100%;     /* never overflow the parent offcanvas */
    margin: 0 auto;      /* centre the wrapper (and image) in the panel */
    overflow: hidden;    /* clip SVG / drag-handles at the image boundary */
    background-color: var(--app-bg, #f1f5f9);
}

/** PDF.js renders the page into this canvas element. */
#pdfAnnotateCanvas {
    display: block;
    /* Width/height set dynamically by JS to match the PDF viewport */
}

/**
 * Image inside annotation wrapper.
 *
 * ⚠  NO object-fit: contain here!
 *    object-fit: contain makes the <img> element fill 100% of the wrapper width
 *    even when the actual image content is narrower (letterboxing).  This causes
 *    imageEl.clientWidth === wrapper.clientWidth (e.g. 1200 px), so the SVG is
 *    oversized and annotation coordinates are offset from the visible image.
 *
 *    Without object-fit the img element is EXACTLY the rendered image size, so
 *    imageEl.clientWidth × clientHeight = actual visible pixels = SVG dimensions.
 */
#annotationContentWrapper > img {
    display: block;
    /*
     * width: 100% — the image fills the full width of its wrapper.
     * min-width: min(80vw, 100%) — physically small images are upscaled to at
     *   least 80 % of the viewport so they are readable in the annotation panel.
     *   min() caps the value at 100 % so it never overflows the wrapper.
     * max-width: 100% — safety: never overflow the wrapper's own width.
     * max-height: 90vh — prevent portrait images from running off the screen.
     * height: auto — preserves the original aspect ratio.
     *
     * CRITICAL: zero margin + zero padding keeps the image flush with the
     * top-left corner of the wrapper.  The SVG overlay uses position:absolute
     * top:0 left:0 — any gap would shift the SVG off the visible image pixels.
     */
    width: 100%;
    min-width: min(80vw, 100%);
    max-width: 100%;
    max-height: 90vh;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: top; /* eliminates the inline-block descender gap */
}


/* =========================================================================
   2. SVG OVERLAY
   Stretched absolutely over the entire wrapper content.
   pointer-events: all — intercepts mouse events so drawing works.
   ========================================================================= */

#annotationSvg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: all;
    /*
     * overflow: hidden clips resize-handles and in-progress rects at the SVG
     * boundary (= image boundary).  The wrapper also has overflow:hidden as a
     * second safety net, so handles can never appear in blank space outside the
     * image even during a fast drag.
     */
    overflow: hidden;
}

/** Crosshair cursor while drawing mode is active */
#annotationSvg.annotation-drawing-active {
    cursor: crosshair;
}


/* =========================================================================
   3. SVG RECTANGLE ANNOTATION ELEMENTS
   ========================================================================= */

/**
 * Default finished annotation rectangle.
 * Uses --color-danger for clear "marked region" semantics.
 * fill: transparent so the underlying image/canvas stays fully visible.
 */
.annotation-rect {
    fill: transparent;
    stroke: var(--color-danger, red);
    stroke-width: 2;
    opacity: 0.85;
    cursor: default;
    transition: opacity 0.15s ease, stroke-width 0.12s ease;
}

.annotation-rect:hover {
    opacity: 1;
    stroke-width: 2.5;
}

/**
 * In-progress rectangle while the user is still dragging.
 * Dashed outline signals "not yet committed".
 */
.annotation-rect--drawing {
    stroke-dasharray: 6 3;
    opacity: 0.55;
    cursor: crosshair;
}

/**
 * Previously saved annotation loaded from the backend (Phase 2).
 * Rendered with a slightly lighter stroke and a subtle fill tint so users can
 * distinguish "already stored" from "newly drawn but not yet saved".
 * Uses --brand-primary to avoid semantic conflict with the danger colour
 * used for newly drawn rects.
 */
.annotation-rect--saved {
    stroke: var(--brand-primary, #2563eb);
    fill: rgba(var(--brand-primary-rgb, 37, 99, 235), 0.05);
    stroke-width: 1.5;
    opacity: 0.75;
    cursor: default;
}

.annotation-rect--saved:hover {
    opacity: 1;
    stroke-width: 2;
    fill: rgba(var(--brand-primary-rgb, 37, 99, 235), 0.10);
}

/**
 * Failed-to-save annotation — POST request returned an error.
 * Uses a dashed orange-ish danger stroke to signal the save failure visually
 * without removing the rect from the SVG (data is not lost).
 */
.annotation-rect--error {
    stroke: var(--color-warning, #f59e0b);
    stroke-dasharray: 5 3;
    opacity: 0.70;
    cursor: help;
}

.annotation-rect--error:hover {
    opacity: 1;
}

/**
 * Resolved annotation — status changed to 'resolved' via PATCH /api/annotations/<id>/status.
 * Green stroke signals "this issue has been fixed".
 */
.annotation-rect--resolved {
    stroke: var(--color-success, #22c55e);
    fill: rgba(34, 197, 94, 0.06);
    stroke-width: 1.5;
    opacity: 0.65;
    cursor: default;
}

.annotation-rect--resolved:hover {
    opacity: 0.9;
    stroke-width: 2;
}

/**
 * Pulse animation — played when the user clicks "Zobrazit na výkresu" (deep link).
 * Applied via JS: rect.classList.add('annotation-rect--pulse'); after a short delay.
 * The animation runs twice (via iteration-count) then the class is removed by JS.
 */
@keyframes annotation-pulse {
    0%   { stroke-width: 2;   opacity: 0.85; }
    40%  { stroke-width: 5;   opacity: 1;    }
    100% { stroke-width: 2;   opacity: 0.85; }
}

.annotation-rect--pulse {
    animation: annotation-pulse 0.6s ease-in-out 3;
}


/* =========================================================================
   6. ANNOTATION REFERENCE CARD (inside chat messages)
   Rendered by appendMessage() when attachments_data contains type:'annotation'.
   Must comply with Theme Engine — no hardcoded colours.
   ========================================================================= */

/**
 * The card wrapper — subtle left-border accent (brand-primary) to visually
 * distinguish it from plain text messages and standard file attachments.
 */
.annotation-ref-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    border-left: 3px solid var(--brand-primary, #2563eb);
    border-radius: var(--radius-md, 10px);
    background-color: var(--card-bg, #fff);
    color: var(--text-main, #0f172a);
    max-width: 320px;
}

/** Top row: icon + filename */
.annotation-ref-card__header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-xs, 0.72rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
}

/** Note preview text */
.annotation-ref-card__note {
    font-size: var(--font-size-sm, 0.82rem);
    color: var(--text-main, #0f172a);
    line-height: 1.5;
    /* Truncate long notes to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/** Status badge (Aktivní / Vyřešeno) */
.annotation-ref-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill, 9999px);
    border: 1px solid;
}

.annotation-ref-card__status--open {
    color: var(--color-danger, #ef4444);
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.07);
}

.annotation-ref-card__status--resolved {
    color: var(--color-success, #22c55e);
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.07);
}

/** Action buttons row */
.annotation-ref-card__actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

/** "Zobrazit na výkresu" — outlined brand-primary */
.btn-annotation-deeplink {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    font-size: var(--font-size-xs, 0.72rem);
    font-weight: 600;
    border: 1px solid var(--brand-primary, #2563eb);
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--brand-primary, #2563eb);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.btn-annotation-deeplink:hover {
    background-color: var(--brand-primary, #2563eb);
    color: #fff;
}

/** "Označit za vyřešené" — outlined success */
.btn-annotation-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    font-size: var(--font-size-xs, 0.72rem);
    font-weight: 600;
    border: 1px solid var(--color-success, #22c55e);
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--color-success, #22c55e);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.btn-annotation-status:hover {
    background-color: var(--color-success, #22c55e);
    color: #fff;
}

.btn-annotation-status:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/** State after marking resolved — neutral muted style */
.btn-annotation-status--resolved {
    border-color: var(--border-color, rgba(0,0,0,0.1));
    color: var(--text-muted, #64748b);
}


/* =========================================================================
   4b. ZOOM TOOLBAR (#annotationZoomBar)
   Floating control cluster in the top-right corner of #annotationContentWrapper.
   Positioned absolutely so it sits on top of the document without affecting
   layout flow. z-index: 40 ensures it stays above the SVG overlay (z-index:10)
   and the tooltip (z-index:30).
   ========================================================================= */

/**
 * Container pill — dark, semi-transparent, rounded.
 * Invisible to the SVG coordinate system (position:absolute, no layout flow).
 */
#annotationZoomBar {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 40;

    display: flex;
    align-items: center;
    gap: 2px;

    background: rgba(15, 23, 42, 0.72);   /* slate-900 @ 72% opacity */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(148, 163, 184, 0.25); /* slate-400 @ 25% */
    border-radius: 8px;
    padding: 3px 5px;

    /* Prevent the toolbar from triggering SVG drawing events */
    pointer-events: all;
    user-select: none;
}

/**
 * Individual zoom button (+, −, □).
 * Square, 28×28 px, icon-only, dark theme.
 */
.ann-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #cbd5e1;          /* slate-300 */
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    /* Stop button clicks from propagating to the SVG mousedown handler */
    pointer-events: all;
}

.ann-zoom-btn:hover {
    background: rgba(148, 163, 184, 0.18); /* subtle highlight */
    color: #f1f5f9;                         /* slate-100 */
}

.ann-zoom-btn:active {
    background: rgba(148, 163, 184, 0.30);
    color: #ffffff;
}

/** Divider between zoom-in/out and reset button */
.ann-zoom-btn:last-child {
    border-left: 1px solid rgba(148, 163, 184, 0.2);
    margin-left: 3px;
    padding-left: 5px;
    border-radius: 0 5px 5px 0;
    width: 32px;  /* slightly wider for the □ icon */
}


/* =========================================================================
   4a. PAGINATION TOOLBAR (#annotationPagination)
   Dark-themed navigation bar shown above the PDF document canvas.
   Positioned in the DOM BEFORE #annotationContentWrapper so the visual
   order is: [Header/Title] → [Pagination Bar] → [Document Content].
   ========================================================================= */

#annotationPagination {
    /* Layout */
    width: 100%;
    box-sizing: border-box;
    display: none;          /* JS switches to flex when PDF mode is active */
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0;

    /* Dark theme */
    background: #1e293b;
    border-bottom: 1px solid #334155;
    color: #e2e8f0;

    /* Typography */
    font-size: 0.85rem;
    user-select: none;

    /* Stacking — above the annotation SVG layer */
    z-index: 25;
    position: relative;
}

/** Page label: "Strana X z Y" */
#annotationPageLabel {
    font-weight: 600;
    min-width: 90px;
    display: inline-block;
    text-align: center;
    color: #f1f5f9;
}

/** Prev / Next navigation buttons */
#annotationBtnPrevPage,
#annotationBtnNextPage {
    background: transparent;
    border: 1px solid #94a3b8;
    color: #e2e8f0;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#annotationBtnPrevPage:hover:not(:disabled),
#annotationBtnNextPage:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.15);
    border-color: #cbd5e1;
    color: #f8fafc;
}

#annotationBtnPrevPage:disabled,
#annotationBtnNextPage:disabled {
    opacity: 0.35;
    cursor: default;
}


/* =========================================================================
   4. FLOATING EDITOR CARD (#annotationEditor)
   Appears near the finished rectangle, fully Theme Engine compliant.
   ========================================================================= */

#annotationEditor {
    position: absolute;
    z-index: 20;
    display: none;           /* JS sets display:block after rect is completed */
    min-width: 260px;
    max-width: 340px;

    background-color: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.07));
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,.07), 0 10px 24px rgba(0,0,0,.06));
    padding: 0.85rem 1rem 0.75rem;
    color: var(--text-main, #0f172a);
}

/** Subtle drag-handle indicator above the card content */
#annotationEditor::before {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    background: var(--border-color, rgba(0,0,0,0.12));
    border-radius: var(--radius-pill, 9999px);
    margin: 0 auto 0.65rem;
}

#annotationEditor label {
    display: block;
    font-size: var(--font-size-xs, 0.72rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.4rem;
}

#annotationEditor textarea {
    display: block;
    width: 100%;
    resize: vertical;
    min-height: 72px;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-color, rgba(0,0,0,0.07));
    border-radius: var(--radius-md, 10px);
    background-color: var(--card-bg, #ffffff);
    color: var(--text-main, #0f172a);
    font-size: var(--font-size-sm, 0.82rem);
    font-family: var(--font-family-base, inherit);
    line-height: var(--line-height-base, 1.6);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#annotationEditor textarea:focus {
    border-color: var(--brand-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 37,99,235), 0.15);
}

#annotationEditor textarea::placeholder {
    color: var(--text-muted, #64748b);
    opacity: 0.7;
}

/** Buttons row */
.annotation-editor-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.65rem;
    justify-content: flex-end;
}

/** "Zrušit" — neutral ghost button */
#annotationBtnCancel {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: var(--font-size-sm, 0.82rem);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#annotationBtnCancel:hover {
    background-color: var(--hover-bg, rgba(0,0,0,0.03));
    color: var(--text-main, #0f172a);
    border-color: var(--border-color, rgba(0,0,0,0.15));
}

/** "Uložit" — brand-primary filled button */
#annotationBtnSave {
    padding: 0.35rem 0.85rem;
    border: none;
    border-radius: var(--radius-md, 10px);
    background-color: var(--brand-primary, #2563eb);
    color: #ffffff;
    font-size: var(--font-size-sm, 0.82rem);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#annotationBtnSave:hover {
    background-color: var(--brand-primary-hover, #1d4ed8);
}


/* =========================================================================
   5. ANNOTATION HEADER BUTTONS (#annotationToggleBtn, #annotationLayersBtn)
   Both live inside the file viewer offcanvas header and share identical base
   styling so they look visually consistent in every light / dark theme.
   ========================================================================= */

#annotationToggleBtn,
#annotationLayersBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border-color, rgba(0,0,0,0.07));
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: var(--font-size-sm, 0.82rem);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#annotationToggleBtn:hover,
#annotationLayersBtn:hover {
    background-color: var(--hover-bg, rgba(0,0,0,0.03));
    color: var(--text-main, #0f172a);
    border-color: var(--brand-primary, #2563eb);
}

/** Active state — annotation mode ON (toggle) or layer panel open (layers) */
#annotationToggleBtn.is-active,
#annotationLayersBtn.is-active {
    background-color: rgba(var(--brand-primary-rgb, 37,99,235), 0.10);
    color: var(--brand-primary, #2563eb);
    border-color: var(--brand-primary, #2563eb);
}