/* =====================================================================
 * DigiSurvey — enterprise UI layer (loaded LAST on every page)
 * ---------------------------------------------------------------------
 * One consistent look for the app chrome on every screen: fonts,
 * focus rings, scrollbars, selection, report toolbars, the sliding
 * Reference Viewer and the "+ Add field" controls.
 *
 * Browser support: written for Chrome/Edge 109 (the last versions on
 * Windows 7/8.1) and newer — no color-mix(), CSS nesting or other
 * post-109 features. Windows 7 has no colour emoji font, so a web
 * emoji font is added to the font stack; icons then look the same on
 * Win 7, Win 10/11, Android and iPhone.
 *
 * The report paper (#paper, .paper) keeps its own print fonts.
 * ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Color+Emoji&display=swap');

:root {
  --ent-font: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji';
  --ent-navy: #0b2545;
  --ent-ink: #06101d;
  --ent-gold: #e4b04a;
  --ent-gold-2: #f0c268;
  --ent-teal: #35d0bb;
  --ent-line: rgba(158, 178, 210, 0.16);
  --ent-radius: 10px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Many pages set overflow-x:hidden on BOTH html and body. That turns body
   into its own scroll box, which silently breaks position:sticky — the
   report top bar and Word ribbon scrolled away. `clip` hides sideways
   overflow the same way without creating a scroll box. */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
@supports not (overflow: clip) { html { overflow-x: hidden !important; } body { overflow-x: visible !important; } }
body { font-family: var(--ent-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
button, input, select, textarea { font-family: inherit; }

/* report paper keeps its own typography */
#paper, .paper, #paperPagesContainer { -webkit-font-smoothing: auto; }

/* focus + selection */
:focus-visible { outline: 2px solid var(--ent-gold); outline-offset: 2px; }
::selection { background: rgba(228, 176, 74, 0.35); }

/* scrollbars (Chrome/Edge incl. 109 on Win 7) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(140, 160, 190, 0.35); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(228, 176, 74, 0.6); background-clip: padding-box; border: 2px solid transparent; }

/* disabled controls read as disabled everywhere */
button:disabled, [disabled] { cursor: not-allowed; }

/* ---------------------------------------------------------------------
 * Report top bar: same navy/gold bar on every report
 * ------------------------------------------------------------------- */
body > .toolbar-mini, body > .toolbar {
  background: linear-gradient(180deg, #0d1b31, #091426) !important;
  border-bottom: 1px solid rgba(228, 176, 74, 0.22) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  font-family: var(--ent-font);
}
/* The bar is always navy (both themes), so its controls must be light.
   Without this, light theme painted the Save / Print / theme icons in
   dark navy on the navy bar — they showed as two empty squares. */
body > .toolbar-mini .tb-btn:not(.primary), body > .toolbar .tb-btn:not(.primary),
body > .toolbar-mini .ds-theme-toggle, body > .toolbar .ds-theme-toggle,
body > .toolbar-mini select, body > .toolbar select {
  color: #e8eef7 !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
body > .toolbar-mini .tb-btn:not(.primary):hover, body > .toolbar .tb-btn:not(.primary):hover,
body > .toolbar-mini .ds-theme-toggle:hover, body > .toolbar .ds-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(228, 176, 74, 0.7) !important;
}
body > .toolbar-mini select option, body > .toolbar select option { color: #0b1626; background: #fff; }
body > .toolbar-mini .tb-btn.primary, body > .toolbar .tb-btn.primary {
  color: #1a1103 !important;
  background: #e4b04a !important;
  border: 1px solid #e4b04a !important;
}
body > .toolbar-mini .tb-btn svg, body > .toolbar .tb-btn svg,
body > .toolbar-mini .ds-theme-toggle svg, body > .toolbar .ds-theme-toggle svg { stroke: currentColor; }
body > .toolbar-mini .back-link, body > .toolbar .back-link { color: #b9c6d8 !important; }
body > .toolbar-mini .brand, body > .toolbar .brand { color: #f1f4f9 !important; }
/* "More" sheet: title was hard-coded white on the white light-theme sheet,
   and the primary button was dark text on navy. */
.more-menu .more-menu-title { color: var(--text-primary, #0b1626) !important; }
.more-menu .tb-btn.primary { color: #1a1103 !important; background: #e4b04a !important; border-color: #e4b04a !important; }

/* ---------------------------------------------------------------------
 * Sliding Reference Viewer (all report pages)
 * The panel is always rendered and slides in/out instead of popping.
 * ------------------------------------------------------------------- */
@media screen {
html body .reference-panel {
  display: flex !important;
  font-family: var(--ent-font);
  visibility: hidden;
  transform: translateY(104%);
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .34s, box-shadow .2s ease;
  will-change: transform;
}
html body .reference-panel.open {
  visibility: visible;
  transform: none;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0s, box-shadow .2s ease;
}
@media (min-width: 861px) {
  html body .reference-panel { transform: translateX(104%); }
  html body .reference-panel.open { transform: none; }
  html body .page-wrap { transition: padding-right .34s cubic-bezier(.2, .8, .2, 1); }
}

}

/* edge tab that pulls the viewer out */
.ent-ref-tab {
  position: fixed; z-index: 45; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 7px; border: 1px solid rgba(228, 176, 74, 0.45); border-right: 0;
  border-radius: 12px 0 0 12px; cursor: pointer;
  background: linear-gradient(180deg, #13284a, #0b1a31); color: var(--ent-gold);
  font: 700 11px/1 var(--ent-font); letter-spacing: .8px;
  box-shadow: -6px 6px 22px rgba(0, 0, 0, 0.35);
  transition: right .34s cubic-bezier(.2, .8, .2, 1), background .15s ease, opacity .2s ease;
}
.ent-ref-tab:hover { background: linear-gradient(180deg, #1a3561, #0f2242); }
.ent-ref-tab .ent-ref-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); }
.ent-ref-tab svg { width: 16px; height: 16px; }
.ent-ref-tab .ent-chev { transition: transform .3s ease; }
.ent-ref-tab.is-open .ent-chev { transform: rotate(180deg); }
@media (max-width: 860px) {
  .ent-ref-tab { top: auto; bottom: 86px; transform: none; padding: 10px 8px; }
  .ent-ref-tab.is-open { opacity: 0; pointer-events: none; }
}

/* ---------------------------------------------------------------------
 * "+ Add field" / remove-field floating controls (never printed, never
 * saved — they live outside the report paper)
 * ------------------------------------------------------------------- */
.ent-gutter {
  position: fixed; z-index: 35; display: none; flex-direction: column; gap: 6px;
}
.ent-gutter.show { display: flex; }
.ent-gutter button {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; font: 700 17px/1 var(--ent-font);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: transform .12s ease;
}
.ent-gutter button:hover { transform: scale(1.12); }
.ent-g-add { color: #1a1103; background: linear-gradient(180deg, var(--ent-gold-2), var(--ent-gold)); border: 1px solid rgba(160, 110, 20, 0.6); }
.ent-g-rm { color: #fff; background: #d0463b; border: 1px solid #a8322a; font-size: 16px; }

/* the user's own fields look exactly like the built-in ones, with a
   faint marker on screen only */
#paper .ent-custom > .k:empty::before, .paper .ent-custom > .k:empty::before { content: 'Field name'; color: #9aa3ad; }
#paper .ent-custom > .v:empty::before, .paper .ent-custom > .v:empty::before { content: 'Type value…'; color: #b3bac2; font-style: italic; }
@media screen {
  .paper [contenteditable]:hover { background: rgba(228, 176, 74, 0.07); }
  .paper [contenteditable]:focus { background: rgba(228, 176, 74, 0.12); box-shadow: 0 0 0 1px rgba(201, 145, 40, 0.65); border-radius: 2px; }
  #paper .ent-custom, .paper .ent-custom { box-shadow: inset 2px 0 0 rgba(228, 176, 74, 0.55); }
}
@media print {
  .ent-gutter, .ent-ref-tab { display: none !important; }
  #paper .ent-custom > .k:empty::before, #paper .ent-custom > .v:empty::before,
  .paper .ent-custom > .k:empty::before, .paper .ent-custom > .v:empty::before { content: none !important; }
}
.pdf-export-mode .ent-gutter, .pdf-export-mode .ent-ref-tab,
.pdf-export-clean .ent-gutter, .pdf-export-clean .ent-ref-tab { display: none !important; }

/* ---------------------------------------------------------------------
 * Toast used by the enterprise helpers
 * ------------------------------------------------------------------- */
.ent-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); opacity: 0;
  z-index: 2000; padding: 11px 16px; border-radius: 12px; max-width: calc(100vw - 32px);
  font: 600 13px/1.35 var(--ent-font); color: #0b1a10; background: #2fc98f;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.ent-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* app messages never end up on the printed page */
@media print { .ent-toast, .ent-gutter, .ent-ref-tab { display: none !important; } }

/* ---------------------------------------------------------------------
 * Reports on phones: the A4 sheet reflows to the screen width so every
 * field is readable and editable without sideways scrolling. Printing
 * and PDF are unaffected (print CSS / the PDF engine use true A4).
 * VIEW → "A4 page" in the ribbon shows the exact A4 sheet instead.
 * ------------------------------------------------------------------- */
@media screen and (max-width: 760px) {
  body:not(.ent-a4) .page-wrap { padding-left: 8px !important; padding-right: 8px !important; overflow-x: hidden; }
  body:not(.ent-a4) .paper {
    width: auto !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important;
    padding: 18px 16px !important; outline-offset: -8px !important; margin: 0 auto !important; font-size: 13px !important;
  }
  body:not(.ent-a4) .paper .kv-grid,
  body:not(.ent-a4) .paper .head-grid { grid-template-columns: 1fr !important; }
  body:not(.ent-a4) .paper .kv-row,
  body:not(.ent-a4) .paper .head-grid .row { flex-wrap: wrap; grid-column: auto !important; }
  body:not(.ent-a4) .paper .kv-row > .k,
  body:not(.ent-a4) .paper .head-grid .row > .k { min-width: 42%; }
  body:not(.ent-a4) .paper .lh-toprow,
  body:not(.ent-a4) .paper .ref-row { flex-wrap: wrap; gap: 6px; }
  body:not(.ent-a4) .paper .lh-right { text-align: left !important; }
  body:not(.ent-a4) .paper table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body:not(.ent-a4) .paper img { max-width: 100%; height: auto; }
  body:not(.ent-a4) .paper select { max-width: 100%; }
  body:not(.ent-a4) .paper [contenteditable] { min-height: 1.4em; }
}

/* compact report top bar on phones (Save/Print live in the ribbon) */
@media screen and (max-width: 600px) {
  body > .toolbar-mini #saveStatusMini { display: none; }
  body > .toolbar-mini .tb-btn:not(.primary) { display: none; }
  body > .toolbar-mini .brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
}

/* =====================================================================
 * PRINT — clean A4 on every report
 *  - no browser header/footer (date, page title, URL): @page margin 0
 *  - a double border frame on EVERY page, same inset all round
 *  - equal margins on every page (top/bottom via a repeating spacer
 *    added by enterprise.js just for printing, left/right via padding)
 *  - readable text sizes
 * ===================================================================== */
@media print {
  @page { size: A4; margin: 0; }
  html, body { width: 210mm !important; }
  .paper.ent-printing::before, #paper.ent-printing::before {
    content: ''; position: fixed; top: 7mm; left: 7mm; right: 7mm; bottom: 7mm;
    border: var(--ent-frame-w, 3px) var(--ent-frame-s, double) var(--ent-frame, #b5541a); pointer-events: none; z-index: 9999;
  }
  .paper.ent-printing, #paper.ent-printing {
    border: none !important; outline: none !important; box-shadow: none !important;
    padding: 0 var(--ent-pad-x, 14mm) !important; margin: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; zoom: 1 !important;
    font-size: 10.5pt !important; line-height: 1.45 !important;
  }
  .ent-printing .ent-print-frame { width: 100% !important; border-collapse: collapse; border: 0 !important; table-layout: fixed !important; }
  .ent-printing .ent-print-frame > thead > tr > td,
  .ent-printing .ent-print-frame > tfoot > tr > td { border: 0 !important; padding: 0 !important; }
  .ent-printing .ent-print-frame > thead > tr > td { height: 13mm; }
  .ent-printing .ent-print-frame > tfoot > tr > td { height: 12mm; }
  .ent-printing .ent-print-frame > tbody > tr > td { border: 0 !important; padding: 0 !important; vertical-align: top; font-size: inherit !important; }
  .ent-printing .ent-print-frame > thead { display: table-header-group; }
  .ent-printing .ent-print-frame > tfoot { display: table-footer-group; }

  /* readable, consistent text */
  .paper.ent-printing .kv-row, .paper.ent-printing .head-grid .row { font-size: 10pt !important; }
  .paper.ent-printing .section-h { font-size: 10.5pt !important; }
  .paper.ent-printing .report-title { font-size: 13pt !important; }
  .paper.ent-printing .disclaimer, .paper.ent-printing .ref-row { font-size: 9pt !important; }
  .paper.ent-printing .rpt-table td, .paper.ent-printing .rpt-table th { font-size: 8.5pt !important; }
  .paper.ent-printing .lh-toprow, .paper.ent-printing .lh-left, .paper.ent-printing .lh-right { font-size: 9pt !important; }
  .paper.ent-printing [contenteditable]:empty::before { content: none !important; }
}

/* =====================================================================
 * Photo sections — size set from the ribbon's PHOTOS tab
 * (--pg-cols = photos per row, --pg-h = photo height). Saved with the
 * report because the values sit on the grid element itself.
 * ===================================================================== */
.photo-grid-print[style*="--pg-cols"], .extra-photos-grid[style*="--pg-cols"] {
  grid-template-columns: repeat(var(--pg-cols), minmax(0, 1fr)) !important;
}
[style*="--pg-h"] .pg-imgbox,
.photo-grid-print[style*="--pg-h"] .pg-item.is-portrait .pg-imgbox,
.photo-grid-print[style*="--pg-h"] .pg-item.is-landscape .pg-imgbox,
[style*="--pg-h"] .spot-photo-tile .imgbox {
  height: var(--pg-h) !important; min-height: var(--pg-h) !important; max-height: var(--pg-h) !important;
}
[style*="--pg-h"] .spot-photo-tile { aspect-ratio: auto !important; height: auto !important; }
.pg-imgbox img, .spot-photo-tile .imgbox img { object-fit: contain !important; }

@media print {
  /* grids that run over several pages print reliably on every Chrome
     version (incl. 109 on Windows 7) as rows of inline boxes */
  .photo-group { break-inside: auto !important; page-break-inside: auto !important; }
  .photo-grid-print, #photos-spot.extra-photos-grid {
    display: block !important; break-inside: auto !important; page-break-inside: auto !important;
    margin-right: -6mm !important; font-size: 0;
  }
  .photo-grid-print > .pg-item, #photos-spot > .spot-photo-tile {
    display: inline-flex !important; flex-direction: column; vertical-align: top; font-size: 10pt;
    width: calc(100% / var(--pg-cols, 2) - 6mm) !important; margin: 0 6mm 6mm 0 !important;
    break-inside: avoid !important; page-break-inside: avoid !important; box-sizing: border-box;
  }
  #photos-spot > .spot-photo-tile { width: calc(100% / var(--pg-cols, 4) - 6mm) !important; }
  .photo-grid-print > .pg-empty, .photo-grid-print > .sheet-title { display: block; font-size: 9pt; width: 100%; }
}
@media print { .photo-group > h4 { break-after: avoid; page-break-after: avoid; } }


/* =====================================================================
 * Report design chosen in the ribbon's DESIGN tab (classes/vars are set
 * on #paper by word-ribbon.js and saved with the report)
 * ===================================================================== */
.paper.ent-font-custom, .paper.ent-font-custom *:not(svg):not(path) { font-family: var(--ent-report-font) !important; }
.paper[style*="--ent-report-scale"] > * { zoom: var(--ent-report-scale); }
.paper[style*="--ent-report-scale"] > *:not(#entDesign) { max-width: calc(100% / var(--ent-report-scale)); }

.paper.ent-h-accent .section-h { border-left: 4px solid var(--theme-accent) !important; background: linear-gradient(90deg, rgba(0,0,0,.035), transparent 60%) !important; color: var(--theme-accent2) !important; border-bottom: 0 !important; }
.paper.ent-h-filled .section-h { background: var(--theme-accent) !important; color: #fff !important; border: 0 !important; padding: 6px 12px !important; border-radius: 2px; }
.paper.ent-h-underline .section-h { background: none !important; border: 0 !important; border-bottom: 2px solid var(--theme-accent) !important; padding: 6px 0 !important; color: var(--theme-accent2) !important; }
.paper.ent-h-boxed .section-h { background: none !important; border: 1.5px solid var(--theme-accent) !important; padding: 5px 10px !important; color: var(--theme-accent2) !important; }
.paper.ent-h-plain .section-h { background: none !important; border: 0 !important; padding: 6px 0 !important; color: #111 !important; }

.paper.ent-b-single { --ent-frame-w: 1.5px; --ent-frame-s: solid; }
.paper.ent-b-thick { --ent-frame-w: 4px; --ent-frame-s: solid; }
.paper.ent-b-none { --ent-frame-w: 0px; --ent-frame-s: none; }
@media screen {
  .paper.ent-b-single { outline-width: 1.5px !important; }
  .paper.ent-b-thick { outline-width: 4px !important; }
  .paper.ent-b-none { outline: none !important; }
}
.paper.ent-m-narrow { --ent-pad-x: 9mm; }
.paper.ent-m-normal { --ent-pad-x: 14mm; }
.paper.ent-m-wide { --ent-pad-x: 20mm; }