/* App-specific styles on top of Bulma. */

/* Elmarco palette (see AGENTS.md), mapped onto Bulma's color variables. */
:root {
  --elmarco-orange: #f39200;
  --elmarco-navy: #0b1f3a;
  --elmarco-blue: #1e5bb8;
  --elmarco-charcoal: #1d1d1b;
  --elmarco-grey: #e9edf2;
  --elmarco-white: #fff;

  /* Orange: primary accent, used for all buttons. */
  --bulma-primary-h: 36deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 48%;
  /* Tech blue: links, secondary accents. */
  --bulma-link-h: 216deg;
  --bulma-link-s: 72%;
  --bulma-link-l: 42%;
  --bulma-info-h: 216deg;
  --bulma-info-s: 72%;
  --bulma-info-l: 42%;
  /* Deep navy: dark sections (navbar). */
  --bulma-dark-h: 215deg;
  --bulma-dark-s: 68%;
  --bulma-dark-l: 13%;
  /* Charcoal body text on a cool grey page; boxes stay white. */
  --bulma-text-h: 60deg;
  --bulma-text-s: 4%;
  --bulma-text-l: 11%;
  --bulma-body-background-color: var(--elmarco-grey);
}

html { background-color: var(--elmarco-grey); }
body { color: var(--elmarco-charcoal); }
.title { color: var(--elmarco-navy); }
a:not(.button):not(.navbar-item):not(.pagination-link):not(.pagination-previous):not(.pagination-next):not(.sort-link) {
  color: var(--elmarco-blue);
}

/* Dark text on orange keeps buttons readable (white on #F39200 fails WCAG contrast). */
.button.is-primary:not(.is-outlined) { color: var(--elmarco-navy); }
.button.is-primary.is-outlined:hover,
.button.is-primary.is-outlined:focus { color: var(--elmarco-navy); }

.navbar.is-dark .brand { color: var(--elmarco-orange); }
.navbar.is-dark .navbar-user { color: #b8c4d6; }
.navbar.is-dark .button.is-primary.is-outlined { background-color: transparent; }
.navbar.is-dark .button.is-primary.is-outlined:hover { background-color: var(--elmarco-orange); }

.table.is-vcentered td, .table.is-vcentered th { vertical-align: middle; }

.image-cell { width: 1%; }

.sort-link { color: inherit; white-space: nowrap; }
.sort-link:hover, .sort-link.is-active { color: var(--elmarco-blue); }
.sort-arrow { font-size: 0.75em; margin-left: 0.25em; opacity: 0.35; }
.sort-link.is-active .sort-arrow { opacity: 1; }

.image-modal-card { width: min(92vw, 1200px); }
#image-modal-img { display: block; width: 100%; height: auto; max-height: calc(100vh - 160px); object-fit: contain; }

.canvas-wrap { background: #000; border-radius: var(--bulma-radius); overflow: hidden; }
/* Size is set by the viewer in app.js to fit the screen. */
#nanocanvas { display: block; touch-action: none; }
.zoom-level { min-width: 4.5rem; }

.measure-side { width: 300px; }
.side-box { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }

.bins-input { width: 5rem; }

.histogram { width: 100%; height: auto; }
.histogram .bar { fill: var(--elmarco-blue); }
.histogram .axis { stroke: var(--bulma-grey); }
.histogram text { fill: var(--elmarco-charcoal); font-size: 15px; text-anchor: middle; }

@media screen and (max-width: 768px) {
  .measure-side { width: auto; }
  .side-box { position: static; max-height: none; }
}