/* Document viewer component (ADO 3070).
   Everything the component owns lives here so hosts stop reaching into its internals. Host stylesheets should
   only size/place the container they hand to the component (e.g. its flex basis within a split pane) — if a host
   needs to restyle something inside, that is a signal the component needs an option, not a CSS override.
   Markup is rendered by DocumentViewer.buildMarkup(). */

/* ---------------------------------------------------------------------------
   Layout — the component stacks header / action panel / viewer vertically.
   Deliberately no flex-basis: how much space the component gets is the host's call.
   --------------------------------------------------------------------------- */

.dv-root {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    /* The component creates this element inside whatever container the host hands it, so it has to fill that
       container without knowing how the host sized it: flex-grow covers a flex parent, height covers a block
       parent. The host still decides how much space the CONTAINER gets — that part is deliberately not set here.
       A host whose container has no resolvable height will collapse the viewer; give it one. */
    flex: 1 1 auto;
    height: 100%;
    /* Flex items default to min-width:auto, i.e. they refuse to shrink below their content size. In a host that
       squeezes the viewer (a multi-pane layout, or a sibling with a min-width), that makes the viewer overflow
       its container instead of narrowing — and an overflow:hidden ancestor then clips the toolbar into an
       unreachable area. That is exactly the ADO 2930 failure. min-width:0 lets the viewer actually get narrow,
       which is what allows Kendo to collapse the toolbar into its overflow menu rather than losing it. */
    min-width: 0;
}

.dv-header {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
    /* Hidden until a sign status is set; updateSignStatus() toggles it inline. */
    display: none;
}

.dv-viewer {
    flex: 1 1 auto;
    min-height: 0;
    /* Same reasoning as .dv-root — must be allowed to shrink so the Kendo toolbar sees its real width. */
    min-width: 0;
    /* Kendo writes explicit pixel width/height inline on init and never updates them when the container
       resizes. Force 100% so the element always fills the flex parent; resize(true) then measures the real
       interior and rescales the pages. */
    width: 100% !important;
    height: 100% !important;
}

/* Expand/collapse affordance for the phone drawer. Hidden by default — tablet and desktop show the list and
   the viewer side by side and have no use for it. Revealed only inside the compact media query below. */
.dv-drawer-toggle {
    display: none;
}

/* Toolbar starts hidden and is revealed once a document loads. */
.dv-viewer .k-toolbar {
    display: none;
}

.dv-viewer .k-blank-page {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Fax / email / annotate action panel
   --------------------------------------------------------------------------- */

.dv-action-panel {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-bottom: 1px solid #ccc;
    background: #f9f9f9;
}

.dv-action-panel .pdf-action-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Annotate panel can grow tall (hint + input + list), so top-align rather than centre. */
.dv-annotate-panel {
    align-items: flex-start;
}

.dv-action-panel .pdf-action-label {
    font-size: 13px;
    white-space: nowrap;
}

.dv-action-panel .pdf-action-input {
    height: 26px;
    padding: 2px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    width: 130px;
}

.dv-action-panel .pdf-action-input-wide {
    width: 200px;
}

.dv-action-panel .pdf-action-input:focus {
    outline: none;
    border-color: #ff6358;
}

.dv-action-panel .pdf-action-inline-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dv-action-panel .pdf-action-lookup {
    width: 150px;
}

.dv-action-panel .pdf-action-separator {
    color: #ccc;
    font-size: 18px;
    padding: 0 4px;
    line-height: 1;
}

/* Keep each label with its own input, the two lookups together, and the buttons together. Without these the
   panel is a flat row of siblings in a wrapping flex container, so at narrow widths a label wraps away from the
   input it describes and the buttons end up interleaved with fields. */
.dv-action-panel .dv-field,
.dv-action-panel .dv-lookups,
.dv-action-panel .dv-actions {
    display: inline-flex;
    align-items: center;
}

.dv-action-panel .dv-field { gap: 4px; }
.dv-action-panel .dv-lookups { gap: 8px; }
.dv-action-panel .dv-actions { gap: 6px; }

/* Compact (phone). Boundary matches ResponsiveGridMode.COMPACT_MAX_WIDTH from ADO 3055 exactly — the viewer
   and the grid it sits beside must change mode at the same width, or the Documents tab ends up half-compact.
   The 768-1199.98 tablet band deliberately gets no override: the .dv-field/.dv-lookups/.dv-actions grouping
   above already keeps each label with its input when the row wraps, which is what tablet needs. */
@media (max-width: 767.98px) {
    /* The action panel is a normal flex block at desktop width, which is fine when there is height to spare.
       On a phone it isn't: opening Fax or Email with its fields stacked consumes the whole pane and pushes the
       document out of view, so the user has to drag the splitter just to see what they are sending. Anchor it
       to the bottom of the viewer instead — the document stays visible above it, and no host has to solve this
       for itself. Capped and scrollable so a tall panel (annotate, with its list) can never fill the viewer. */
    .dv-root {
        position: relative;
    }

    .dv-action-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /* Above the annotation layer. The overlay boxes are z-index 11 (set inline in renderAnnotationOverlays)
           and the placement markers 12, so at the old value of 5 an annotation sitting low on the page painted
           straight through this panel — visible as "3rd test" overlapping the Annotate card header. The panel
           is interactive foreground; the overlays belong to the document behind it. */
        z-index: 20;
        max-height: 60%;
        overflow-y: auto;
        border-top: 1px solid #ccc;
        border-bottom: none;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    }

    .dv-action-panel .pdf-action-section {
        gap: 10px;
    }

    /* Bottom sheet only: flush to the bottom edge, since a card floating above the screen bottom with a gap
       under it reads as a mistake rather than a card. Deliberately scoped by WIDTH, not by .dv-drawer-capable
       — see the note next to the base .dv-action-panel card rule. */
    .dv-root.dv-web .dv-action-panel {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .dv-action-panel .dv-lookups,
    .dv-action-panel .dv-field,
    .dv-action-panel .dv-actions {
        display: flex;
        width: 100%;
    }

    .dv-action-panel .dv-lookups .pdf-action-lookup,
    .dv-action-panel .dv-field .pdf-action-input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .dv-action-panel .dv-field .pdf-action-label {
        flex: 0 0 auto;
    }

    /* The vertical rule only reads as a divider on one line; stacked it is just noise. */
    .dv-action-panel .pdf-action-separator {
        display: none;
    }
}

/* Drawer band. WIDER than the compact block above, deliberately: the drawer exists because a STACKED layout
   splits the vertical budget, and the Documents host stacks from 991px down — so 768-991 (portrait tablets)
   needs it just as much as a phone. Introducing a drag-splitter for that band alone would be a third,
   less obvious mechanism for one range; ADO 3055 never does that either (its task list has no splitter, and
   its editor swaps the splitter for the drawer at narrow widths).
   991px matches the host's stacking breakpoint exactly. A future host that stacks elsewhere should get an
   option rather than this constant being moved. Every rule is scoped to .dv-drawer-capable, so embedded
   Remote/Office is unaffected at any width. */
@media (max-width: 991.98px) {
    /* ---- Phone drawer -----------------------------------------------------
       Collapsed, the host's pane leaves the viewer ~250px, of which the status bar and toolbar take ~70 — too
       little to read a document and nowhere for a fax panel to go. Rather than fight the host for that space,
       the viewer promotes itself over the host's content when the user asks for it. See the "Phone drawer"
       block in DocumentViewer.ts for why this belongs to the component rather than each tab's layout.

       Modelled on ADO 3055's CiCi drawer: same `-drawer-expanded` / `-drawer-toggle` class shape, and the
       height lives HERE keyed on the state class rather than being measured in JS — same rule 3055 follows. */
    /* The header strip is the drawer's handle at compact width, and the whole strip is the hit target rather
       than just the glyph (32px of chevron is a poor touch target) — same reasoning as 3055's cici-drawer.
       Its visibility is decided in updateSignStatus(), NOT here: those show/hide calls set an inline style,
       so a stylesheet rule could only win with !important. 3055 hit the same conflict and made the same call. */
    .dv-root.dv-drawer-capable .dv-header {
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    /* Matches 3055's .cici-drawer-toggle exactly: flat, transparent, 32x26, and pointer-events:none so the
       click lands on the header. Deliberately NOT a floating pill — the two drawers should read as the same
       control in the same application. */
    .dv-root.dv-drawer-capable .dv-drawer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 32px;
        height: 26px;
        border: none;
        border-radius: 4px;
        background: transparent;
        color: #495057;
        pointer-events: none;
    }

    /* The sheet's top edge. Review feedback (2026-08-18) was that collapsed, it is not obvious enough that the
       viewer is something you pull up — the chevron alone did not carry it. Square and flush, the drawer reads
       as a seam below the list; rounded and elevated it reads as a surface resting OVER the list, which is
       what it actually is. Applies collapsed and expanded: collapsed is the state that needed it.
       12px matches .nellie-modal-content. Nellie has no bottom-sheet of its own to copy, and a sheet should
       outrank the 8px cards it contains. Deliberately no grab-handle pill — every sheet that shows one is
       drag-dismissible and this one is tap-toggle; the pill would promise a gesture that does not exist.
       No overflow:hidden needed: .dv-header sets no background, so the root's own rounded background is what
       shows at the corners. Give the header a background and the corners go square again. */
    .dv-root.dv-web.dv-drawer-capable {
        /* WHITE, overriding .dv-web's --dv-surface. This is why the first attempt read as part of the grid:
           the sheet was painted #f8f9fa, so a grey card met a white grid and the radius had nothing to show
           itself against. Nellie's idiom is the reverse — white cards on an #f8f9fa surface — and the host
           supplies that surface in the gap above (see .patientDocumentRightPane in Form.cshtml). */
        background: #fff;
        /* No border-top. A 1px line across the top is the hard edge the shadow was supposed to replace —
           border + shadow + the host's fade scrim is three edge treatments arguing with each other. The white
           sheet already separates cleanly from the #f8f9fa gap, so contrast carries it and the shadow does the
           elevation. The side/bottom edges need no border either: they meet the viewport, not the list. */
        border-radius: 12px 12px 0 0;
        /* Two layers, not one. A single shadow has to choose between definition (tight and dark, which reads as
           a drawn line) and softness (wide and pale, which reads as haze) — stacking a tight contact shadow
           under a wide ambient one gives both, which is how a real edge behaves. box-shadow follows
           border-radius, so both curve with the corners rather than running straight across them.
           Depends on the host leaving room above (16px on .patientDocumentRightPane): flush against the grid
           there is nowhere for either layer to fall off. */
        box-shadow: 0 -1px 2px rgba(0, 0, 0, .05),
                    0 -6px 18px rgba(0, 0, 0, .10);
    }

    /* Anchored BELOW the app header, never over it. The Task Editor drawer can use the full screen because it
       lives in a full-screen popup with no navbar; this page keeps its navbar, so the two must not overlap.
       Raising z-index above the header would fight a deliberate decision — StyleSheet.css sets
       .mainHeader { z-index: 10002 } specifically to stay above Kendo's overlay — and would bury the toolbar
       and the drawer's own handle underneath it, which is exactly the trap this replaces.
       --dv-drawer-top is measured from the live header by DocumentViewer (see setDrawerExpanded). */
    .dv-root.dv-drawer-capable.dv-drawer-expanded {
        position: fixed;
        top: var(--dv-drawer-top, 0px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        height: auto !important;
        background: #fff;
        /* Lifted over the list rather than sitting beside it, so the elevation goes up a step. */
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .16);
    }

    /* Collapsed the whole pane is a tap target, so signal that rather than leaving it looking inert. */
    .dv-root.dv-drawer-capable:not(.dv-drawer-expanded) .dv-viewer {
        cursor: pointer;
    }

    /* The zoom combo is the only tool left on the ribbon at this width — everything else has folded into the
       overflow menu — so it can afford the room, and it needs it: "Automatic width" and "Fit to Width" both
       truncate at Kendo's default.

       Kendo writes an inline width on the .k-combobox wrapper, which beats a stylesheet rule, so the actual
       sizing is done in JS next to the page-box sizing in renderPdfViewer(). This rule is only the floor for
       the case where that has not run yet. */
    .dv-root.dv-drawer-capable .dv-viewer .k-toolbar .k-combobox {
        min-width: 9.5em;
    }
}

/* ---------------------------------------------------------------------------
   Toolbar buttons — flat until hovered/active, grey (not primary blue) when selected
   --------------------------------------------------------------------------- */

.dv-viewer .k-toolbar .btn-rotate-pdf:not(:hover):not(:active),
.dv-viewer .k-toolbar .btn-fax-pdf:not(:hover):not(:active):not(.k-selected),
.dv-viewer .k-toolbar .btn-email-pdf:not(:hover):not(:active):not(.k-selected),
.dv-viewer .k-toolbar .btn-annotate-pdf:not(:hover):not(:active):not(.k-selected) {
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.dv-viewer .k-toolbar .btn-fax-pdf.k-selected,
.dv-viewer .k-toolbar .btn-email-pdf.k-selected,
.dv-viewer .k-toolbar .btn-annotate-pdf.k-selected {
    background-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: inherit !important;
}

.dv-viewer .k-toolbar .btn-fax-pdf .fa-fax,
.dv-viewer .k-toolbar .btn-annotate-pdf .fa-pen-to-square {
    font-size: 1em;
    margin-right: 4px;
    vertical-align: middle;
}

/* Scoped to the component — the original rule was page-wide and leaked to any Kendo toolbar. */
.dv-viewer .k-toolbar-item[data-command="PageChangeCommand"] label {
    margin-left: 6px;
}

/* Pager input: Kendo gives the TextBox wrapper an inline width. The render callback also fixes this in JS;
   this is the CSS fallback in case it ever resolves earlier. */
.dv-viewer .k-viewer-pager-input .k-input,
.dv-viewer #page-input + .k-input,
.dv-viewer span.k-input:has(#page-input) {
    width: 3em !important;
    min-width: 0 !important;
}

/* ---------------------------------------------------------------------------
   Annotation markers and list.

   Consolidated here from DocumentViewer.ensureMarkerStyles(), which used to inject them at runtime. Two
   competing designs existed: this one (rendered on the signing editor) and an older blue/flex variant in
   PatientDocument/Form.cshtml, which won on Daily Appt Documents because body stylesheets beat head-injected
   ones. This one is canonical — it is the more current design, it is what the TS markup is actually built for
   (the list is a 3-column grid with header/caret/actions), and its purple matches the #7e57c2 dashed overlay
   box the marker turns into. The blue variant clashed with that box.
   --------------------------------------------------------------------------- */

.annotation-pending-marker,
.annotation-selected-marker,
.annotation-success-flash {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 12;
    box-shadow: 0 0 0 2px #fff;
}

/* Purple: a new annotation being placed. Matches the overlay box it becomes. */
.annotation-pending-marker {
    background: #7e57c2;
    animation: oa-anno-pulse 1.2s ease-in-out infinite;
}

/* Red: locating one specific existing annotation from the list. */
.annotation-selected-marker {
    background: #e05a5a;
    animation: oa-anno-pulse 1.2s ease-in-out infinite;
}

.annotation-success-flash {
    background: #2e7d32;
}

@keyframes oa-anno-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;  }
    50%      { transform: scale(1.6); opacity: .5; }
}

.dv-annotation-list {
    display: block;
    width: 100%;
    margin: 4px 0 0;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    overflow: hidden;
}

.annotation-list-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #f3f4f6;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    color: #333;
    user-select: none;
}

.annotation-list-header:hover {
    background: #e9ebee;
}

.annotation-list-caret {
    transition: transform .15s ease;
    font-size: 11px;
    color: #666;
}

.annotation-list-header.annotation-list-collapsed .annotation-list-caret {
    transform: rotate(-90deg);
}

/* Annotations are unbounded — usually one or two, occasionally many — so the list scrolls rather than pushing
   the document off screen. ~112px is the header row plus three items; beyond that the space is worth more to
   the document than to the list, and the user is editing one annotation at a time regardless. */
.annotation-list-grid {
    display: block;
    max-height: 112px;
    overflow-y: auto;
}

.annotation-list-item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border-top: 1px solid #eee;
    font-size: 12px;
}

.annotation-list-headrow {
    font-weight: 600;
    color: #666;
    background: #fafafa;
    border-top: none;
    position: sticky;
    top: 0;
    cursor: default;
}

.annotation-list-item.annotation-has-position {
    cursor: pointer;
}

.annotation-list-item.annotation-has-position:hover {
    background: #f3eefc;
}

.annotation-list-item.annotation-list-editing {
    background: #ede7f6;
}

.annotation-list-badge {
    text-align: center;
    color: #5e35b1;
    font-weight: 600;
}

.annotation-list-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.annotation-list-actions {
    display: flex;
    gap: 4px;
}

.annotation-list-edit,
.annotation-list-remove {
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
}

.annotation-list-edit {
    color: #5e35b1;
}

.annotation-list-edit:hover {
    background: #ede7f6;
    border-color: #7e57c2;
}

.annotation-list-remove {
    color: #c0392b;
}

.annotation-list-remove:hover {
    background: #fdecea;
    border-color: #c0392b;
}

/* ---------------------------------------------------------------------------
   Mode cursors. These key off state classes the component puts on its own root.
   (Until 3070 those classes were never applied — the panel searched for its own root among its descendants —
   so every one of these rules was dead in the hosts that defined them.)
   --------------------------------------------------------------------------- */

.dv-root.annotation-mode-active .dv-viewer .k-page {
    cursor: crosshair;
}

/* Rotated: annotation placement is blocked, so don't invite a click. */
.dv-root.annotation-mode-active.rotation-active .dv-viewer .k-page {
    cursor: default;
}

/* Generic click-to-place mode: crosshair over the page. !important + descendants to beat Kendo's text-layer
   cursor, which otherwise leaves it a plain pointer.
   The host owns the cursors for anything IT draws inside the viewer (the signing editor's signature
   footprints, for example) — the component deliberately knows nothing about that DOM. */
.dv-root.placement-mode-active .dv-viewer .k-page,
.dv-root.placement-mode-active .dv-viewer .k-page * {
    cursor: crosshair !important;
}

/* ===========================================================================
   Web visual treatment (ADO 3070) — `.dv-web`
   ===========================================================================
   Applied ONLY when the viewer is not hosted in Remote/Office (see DocumentViewer's constructor). Inside WPF
   the viewer is surrounded by Kendo/WPF chrome and should keep matching it; on the web it sits next to Nellie
   and currently reads as "Kendo + Remote" instead.

   These are Nellie's VALUES, not Nellie's classes. `nellie.css` is only linked from `_NellieLayout.cshtml`, and
   pulling it into `_Layout` would restyle every Lightning page — not a change to make casually. So the tokens
   below are copied from `.claude/docs/NELLIE_UI_REFERENCE.md` §2-§3 and kept in one block: if the two are ever
   consolidated, this is the only place to look. Do NOT add `.nellie-*` class names to this component's markup;
   they would resolve to nothing here.

   Feedback this addresses, in the reviewers' own terms: roundedness, the card look, and the colours.
   --------------------------------------------------------------------------- */

.dv-root.dv-web {
    /* Inter, matching nellie.css:32 exactly. Reviewed and kept 2026-08-18 — the geometry tuned against the
       previous stack held, so nothing was re-tuned around it.
       Scoped to the component so it cannot disturb the rest of the page. The webfont <link> lives in _Layout
       (same URL/weights _NellieLayout uses); making the font available changes nothing by itself, because this
       is the only rule that requests it.
       Stops at Kendo's own widgets by design — the ribbon, the overflow menu and the Vendor/Facility pickers
       stay on the system stack because the theme hard-codes font-family on ~68 selectors, and Nellie makes
       exactly the same trade. Plain <input>s DO get Inter: bootstrap.css:455 reboots them to inherit. */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Nellie reference §2 Core Tokens / §3 Palette. Prefixed dv- because they are this component's copies. */
    --dv-green: #16A34A;          /* "click me" — primary action (NOT #198754, which means "done") */
    --dv-green-hover: #15803D;
    --dv-text: #374151;
    --dv-text-muted: #6b7280;
    --dv-border: #dee2e6;         /* card + panel borders */
    --dv-input-border: #d1d5db;
    --dv-focus: #3B82F6;          /* blue focus ring, replacing Kendo's #ff6358 orange */
    --dv-surface: #f8f9fa;
    --dv-radius: 8px;
}

/* ---- 1. Buttons ----------------------------------------------------------
   One green primary per bar, everything else a white secondary (Nellie principle: "green is the verb").
   Kendo's own solid/base classes stay on the markup so nothing breaks if this block is removed. */
/* Settled at 6px after comparing against real Nellie screens. Nellie's documented 8px 14px is accurate for its
   roomy single-column cards, and its buttons genuinely ARE chunky — what made ours look oversized was the 44px
   mobile min-height stacked on top of that padding, not the padding itself. 6px keeps Nellie's proportions in
   a row that sits against a toolbar. */
.dv-root.dv-web .dv-action-panel .k-button {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Disabled primary is pale green, not grey — visible on Nellie's "Continue to Review". Kendo's own disabled
   styling would otherwise grey it out and break the family resemblance. */
.dv-root.dv-web .dv-btn-send-fax:disabled,
.dv-root.dv-web .dv-btn-send-email:disabled,
.dv-root.dv-web .dv-btn-add-annotation:disabled,
.dv-root.dv-web .dv-btn-send-fax.k-disabled,
.dv-root.dv-web .dv-btn-send-email.k-disabled,
.dv-root.dv-web .dv-btn-add-annotation.k-disabled {
    background: #86EFAC;
    border-color: #86EFAC;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
}

/* Card header — icon + 14px/600 title, the idiom on every Nellie card ("Record Live", "Upload Audio", "Paste
   Transcript"). Our panels were a bare row of controls with nothing saying which mode you were in. Icons are
   the SAME ones the toolbar already uses (fa-fax / fa-envelope / fa-pen-to-square) rather than new ones. */
.dv-root.dv-web .dv-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dv-text);
}

.dv-root.dv-web .dv-panel-header i {
    color: var(--dv-text-muted);
}

/* Hidden outside the web treatment: in WPF the panel stays the compact strip it has always been. */
.dv-root:not(.dv-web) .dv-panel-header {
    display: none;
}

/* Also hidden when the HOST already titles the mode. The signing editor's page header says "Edit Document" /
   "Sign Document" with its own icon and its own type treatment; adding "Annotate" underneath it produced two
   headings for one mode, worded differently and styled differently. The panel header only earns its place
   where the panel is one of several modes inside a viewer that has no title of its own — which is exactly the
   Documents tab, and exactly what lockAnnotateMode distinguishes. */
.dv-root.dv-lock-annotate .dv-panel-header {
    display: none;
}

.dv-root.dv-web .dv-btn-send-fax,
.dv-root.dv-web .dv-btn-send-email,
.dv-root.dv-web .dv-btn-add-annotation {
    background: var(--dv-green);
    border-color: var(--dv-green);
    color: #fff;
}

.dv-root.dv-web .dv-btn-send-fax:hover,
.dv-root.dv-web .dv-btn-send-email:hover,
.dv-root.dv-web .dv-btn-add-annotation:hover {
    background: var(--dv-green-hover);
    border-color: var(--dv-green-hover);
}

.dv-root.dv-web .dv-btn-cancel-fax,
.dv-root.dv-web .dv-btn-cancel-email,
.dv-root.dv-web .dv-btn-cancel-annotation,
.dv-root.dv-web .dv-btn-cancel-annotate-panel,
.dv-root.dv-web .dv-download-fallback {
    background: #fff;
    border: 1px solid var(--dv-border);
    color: var(--dv-text);
}

.dv-root.dv-web .dv-btn-cancel-fax:hover,
.dv-root.dv-web .dv-btn-cancel-email:hover,
.dv-root.dv-web .dv-btn-cancel-annotation:hover,
.dv-root.dv-web .dv-btn-cancel-annotate-panel:hover,
.dv-root.dv-web .dv-download-fallback:hover {
    background: var(--dv-surface);
}

/* ---- 2. Inputs -----------------------------------------------------------
   The focus colour is the giveaway: Kendo Default focuses to #ff6358 orange. Nellie uses a blue ring. */
.dv-root.dv-web .dv-action-panel .pdf-action-input {
    height: 30px;
    border: 1px solid var(--dv-input-border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--dv-text);
}

.dv-root.dv-web .dv-action-panel .pdf-action-input:focus {
    border-color: var(--dv-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

.dv-root.dv-web .dv-action-panel .pdf-action-input::placeholder {
    color: #9ca3af;
}

.dv-root.dv-web .dv-action-panel .pdf-action-label {
    color: var(--dv-text-muted);
    font-weight: 600;
}

/* Kendo renders the vendor/facility dropdowns; match their radius so they do not stay square next to the
   rounded inputs beside them. */
.dv-root.dv-web .dv-action-panel .k-dropdownlist,
.dv-root.dv-web .dv-action-panel .k-picker {
    border-radius: 6px;
}

/* ---- 3. Action panel as a card ------------------------------------------
   Was a flat #f9f9f9 strip with a #ccc hairline. Nellie's idiom is a white card on a light surface. */
.dv-root.dv-web .dv-action-panel {
    background: #fff;
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    padding: 12px;
    /* Nellie cards carry 12px below them; the surface showing through on all four sides is what makes a card
       read as a card rather than as a bordered region. */
    margin: 10px 10px 12px;
}

/* A white card on a white background is just a bordered box. Nellie's cards read as cards because they sit on
   a light surface — that contrast is most of what "the card look" actually is. Applied to the component root
   so the panel and the viewer both sit on it. */
.dv-root.dv-web {
    background: var(--dv-surface);
}

/* NOTE: the flush-bottom variant lives in the max-width:767.98px block further down, NOT here. It was
   originally keyed on .dv-drawer-capable, which is a HOST class (present in any browser at any width), so it
   was flattening the card's bottom margin and radius on desktop too — the card ended up sitting directly on
   the toolbar divider with no room outside it. Only the bottom-sheet position should be flush. */

/* ---- 5. Header strip -----------------------------------------------------  */
.dv-root.dv-web .dv-header {
    border-bottom: 1px solid var(--dv-border);
    color: var(--dv-text);
}

/* ---- 6. Sign status as a badge ------------------------------------------
   Nellie badge geometry (§8.3): 11px/600, radius 12px, 2px 8px. Neutral by default; the semantic variants are
   applied by updateSignStatus(). */
.dv-root.dv-web .dv-sign-status:not(:empty) {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: #F3F4F6;
    color: var(--dv-text-muted);
}

.dv-root.dv-web .dv-sign-status.dv-status-signed { background: #DBEAFE; color: #2563EB; }
.dv-root.dv-web .dv-sign-status.dv-status-done   { background: #D1FAE5; color: #059669; }
.dv-root.dv-web .dv-sign-status.dv-status-warn   { background: #FFF7ED; color: #92400E; }
.dv-root.dv-web .dv-sign-status.dv-status-danger { background: #FEE2E2; color: #DC2626; }

/* ---- Touch targets -------------------------------------------------------
   Nellie requires 44px minimum at <=768px. Ours are k-button-sm (~28px) today. */
@media (max-width: 767.98px) {
    .dv-root.dv-web .dv-action-panel .k-button {
        min-height: 44px;
        padding: 8px 14px;
    }

    .dv-root.dv-web .dv-action-panel .pdf-action-input {
        height: 44px;
    }
}

/* ---- 7. Annotation list --------------------------------------------------
   The last "Kendo + Remote" surface inside the component. Brought onto Nellie's card geometry and type scale.

   THE PURPLE STAYS. `#7e57c2` / `#5e35b1` are not decoration — they tie each list row to the dashed overlay box
   the annotation renders as on the page, and that box is drawn by Kendo's PDF viewer, not by us, so it cannot
   be recoloured to match a Nellie hue. Recolouring only the list would break the one association the list
   exists to provide. Everything neutral around it is fair game, and that is what changes here.

   The base rules above stay untouched, so embedded Remote/Office is unaffected. */
.dv-root.dv-web .dv-annotation-list {
    border-color: var(--dv-border);
    border-radius: var(--dv-radius);
    margin-top: 8px;
}

.dv-root.dv-web .annotation-list-header {
    padding: 8px 12px;
    gap: 8px;
    background: var(--dv-surface);
    color: var(--dv-text);
    font-size: 13px;
}

.dv-root.dv-web .annotation-list-header:hover {
    background: #f1f3f5;
}

/* Nellie's own section chevron: 11px at #6c757d. */
.dv-root.dv-web .annotation-list-caret {
    color: #6c757d;
}

/* The column labels are metadata, not content — Nellie's badge/label size rather than body size. */
.dv-root.dv-web .annotation-list-headrow {
    padding: 6px 12px;
    background: var(--dv-surface);
    border-bottom: 1px solid var(--dv-border);
    color: var(--dv-text-muted);
    font-size: 11px;
}

.dv-root.dv-web .annotation-list-item {
    padding: 6px 12px;
    border-top-color: #f1f3f5;
    color: var(--dv-text);
    font-size: 13px;
}

/* The cap exists so a long list cannot push the document off screen; the target is "header row plus three".
   Nellie's roomier padding and larger type make a row ~36px instead of ~28px, so the pixel budget has to grow
   with it or the same rule would start showing two. */
.dv-root.dv-web .annotation-list-grid {
    max-height: 132px;
}

/* 22px fails WCAG 2.2 AA (2.5.8 wants 24x24). 24px base, 32px on touch — not the 44px used on the action panel,
   which is the AAA target and would blow the list's height budget across three rows for no AA gain. */
.dv-root.dv-web .annotation-list-edit,
.dv-root.dv-web .annotation-list-remove {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border-color: var(--dv-input-border);
}

@media (max-width: 767.98px) {
    .dv-root.dv-web .annotation-list-edit,
    .dv-root.dv-web .annotation-list-remove {
        width: 32px;
        height: 32px;
    }

    /* Taller rows, so the "three visible" budget grows again. */
    .dv-root.dv-web .annotation-list-grid {
        max-height: 156px;
    }
}

/* ---------------------------------------------------------------------------
   Fixes from the 2026-08-18 styling pass review
   --------------------------------------------------------------------------- */

/* The new-annotation row is a .pdf-action-inline-group, NOT the .dv-field/.dv-actions grouping that fax and
   email use — so the compact stacking rules above never reached it and "Cancel" was clipped off the right edge
   at 375px. Let it wrap and let the text field take the remaining width. */
@media (max-width: 767.98px) {
    .dv-root .dv-annotate-new {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 6px;
    }

    .dv-root .dv-annotate-new .pdf-action-input {
        flex: 1 1 100%;
        width: auto;
        min-width: 0;
    }
}

/* The vertical rule reads as a divider only when the row actually stays on one line. Across the whole drawer
   band it usually does not, leaving an orphaned "|" dangling at the end of a wrapped row. Previously hidden
   only below 768. */
@media (max-width: 991.98px) {
    .dv-root .dv-action-panel .pdf-action-separator {
        display: none;
    }
}