/**
 * Design tokens.
 *
 * Colors mirrored into tailwind.config in app/index.php (under the `ev-`
 * prefix, so they never collide with Tailwind's own stock palette) — this
 * file is the source of truth for the actual values, plus the handful of
 * things Tailwind's utility classes don't cover: focus rings, scrollbars,
 * and the blueprint-grid texture used behind dark surfaces.
 *
 * Palette: light neutral app shell (white sidebar + light gray background),
 * BuildVue orange as the one primary accent — buttons, active nav, active
 * tabs, selected rows/elements. Blue is reserved for the "Information"
 * functional color only (info badges/alerts), never for primary actions.
 * Dark navy is used sparingly for project-context surfaces (project hero),
 * not the sidebar. Success/warning/danger round out the functional set.
 */

:root {
  /* Surfaces */
  --ev-bg:             #f5f7f9;
  --ev-surface:        #ffffff;
  --ev-paper:          #f5f7f9;   /* legacy alias — same as --ev-bg */
  --ev-paper-dim:      #eef1f5;   /* table heads, hover backgrounds */

  /* Dark navy — project hero / dark accent surfaces only, never the sidebar */
  --ev-ink:            #0f293e;
  --ev-ink-light:      #17364f;

  /* Text */
  --ev-graphite:       #0f172a;   /* main text */
  --ev-steel:          #64748b;   /* secondary text */
  --ev-muted:          #94a3b8;   /* muted / tertiary text */
  --ev-steel-light:    #e2e8f0;   /* borders */

  /* Primary accent — BuildVue orange. Buttons, active nav, active tabs,
     selected rows, important highlights. Used carefully, not everywhere. */
  --ev-orange:         #f97316;
  --ev-orange-hover:   #ea580c;
  --ev-orange-light:   #fff7ed;
  --ev-orange-text:    #c2410c;   /* active-state text tone (sidebar, tabs) */

  /* legacy alias — old "signal" name, still referenced as brand accent */
  --ev-signal:         #f97316;
  --ev-signal-light:   #fff7ed;

  /* Information — the one functional "info" color. Info badges/alerts and
     the odd informational link only; never used for primary actions. */
  --ev-blue:           #2563eb;
  --ev-blue-hover:     #1d4ed8;
  --ev-blue-light:     #dbeafe;

  /* Semantic */
  --ev-success:        #16a34a;
  --ev-success-light:  #e3f6ec;
  --ev-warning:        #d97706;
  --ev-warning-light:  #fef3e2;
  --ev-danger:         #dc2626;
  --ev-danger-light:   #fde8e8;
}

html {
  background: var(--ev-bg);
}

/* Keyboard focus must stay visible everywhere — never suppressed */
:focus-visible {
  outline: 2px solid var(--ev-orange);
  outline-offset: 2px;
}

/* Blueprint-grid texture, used sparingly behind dark surfaces (project hero) */
.ev-grid-texture {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Slim, quiet scrollbars for scroll containers (sidebar, tables, drawers) */
.ev-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--ev-steel-light) transparent;
}
.ev-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.ev-scroll::-webkit-scrollbar-thumb {
  background: var(--ev-steel-light);
  border-radius: 999px;
}

/* Button variants — real classes, not just markers, because ui.js's
   confirmDialog() toggles ev-btn-primary/ev-btn-danger on a button whose
   look needs to change at runtime (Tailwind's CDN build can only see
   utility classes present in the initial HTML, not ones added later). */
.ev-btn-primary {
  background: var(--ev-orange);
  color: #fff;
}
.ev-btn-primary:hover {
  background: var(--ev-orange-hover);
}
.ev-btn-secondary {
  background: #fff;
  color: var(--ev-graphite);
  border: 1px solid var(--ev-steel-light);
}
.ev-btn-secondary:hover {
  background: var(--ev-paper-dim);
  border-color: #cbd5e1;
}
.ev-btn-danger {
  background: var(--ev-danger);
  color: #fff;
}
.ev-btn-danger:hover {
  background: #b91c1c;
}

.ev-dropzone-active {
  border-color: var(--ev-orange);
  background: var(--ev-orange-light);
}

/* Active tab — Tailwind's CDN build can't see a dynamically-toggled class
   in its content scan, so this one rule lives here instead of as a
   Tailwind utility combination. */
.ev-tab-active {
  color: var(--ev-orange-text);
  border-color: var(--ev-orange);
}
/* The open tab inside a Tabs "Meer" menu */
.ev-tab-more-item.ev-tab-active {
  background: var(--ev-orange-light);
  font-weight: 600;
}

/* Active sidebar nav item — same reasoning: toggled at runtime by ui.js
   for client-routed state, so it needs a real class, not just a utility
   combination baked into the initial HTML. */
.ev-nav-active {
  background: var(--ev-orange-light);
  color: var(--ev-orange-text);
}
.ev-nav-active svg {
  color: var(--ev-orange);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Touch screens (docs/offline-field-work.md §mobile): form text at 16px so iOS does not zoom in on focus now that
   page zoom is no longer disabled, and room for gloves around the smallest controls. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea {
    font-size: 16px !important;
  }
  input[type="checkbox"], input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
  /* A panel focuses its close button on opening (ui.js). On touch that is not something to point out. */
  [data-modal-close]:focus-visible, [data-drawer-close]:focus-visible, [data-nav-close]:focus-visible { outline: none !important; box-shadow: none !important; }
}

/* Modals and drawers on phones (iOS Safari especially): size against the
   *visible* viewport (dvh, not vh — on iOS 100vh is the screen height with
   the browser bars hidden), keep clear of the notch and home indicator
   (viewport-fit=cover), and let the panel scroll inside itself so the
   header and the footer buttons always stay on screen. */
.ev-overlay-pad {
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.ev-modal-panel {
  max-height: calc(100vh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.ev-drawer-panel {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* A drawer or full-screen panel over the page (the open issue on a tablet or phone): the page behind it keeps
   still, so there is only one thing to scroll. Toggled by roundWorkspace.js. */
html.ev-scroll-lock, html.ev-scroll-lock body {
  overflow: hidden;
  overscroll-behavior: none;
}