/* App-wide UX rules (loaded on every page from app/layout.tsx). */

/* One visible keyboard focus ring everywhere (many components set outline:none for mouse users). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .18) !important;
}

/* A button whose save is running: disabled, with a small spinner (lib/ux.ts). */
button.is-busy, [role="button"].is-busy { cursor: progress !important; opacity: .75; position: relative; }
button.is-busy::after {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: rvrSpin .7s linear infinite;
}
@keyframes rvrSpin { to { transform: rotate(360deg); } }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; }

/* Action inside a toast (e.g. Retry). */
.rvr-note-action {
  margin-top: 8px; border: 1px solid var(--note-bar, #2563eb); background: #ffffff; color: var(--note-title, #1e3a8a);
  font-weight: 700; font-size: 12px; padding: 4px 12px; border-radius: 8px; cursor: pointer;
}
.rvr-note-action:hover { background: var(--note-bg, #eff6ff); }

/* Long modals scroll inside instead of running off the screen. */
.rvr-modal-box { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }

/* Phones and tablets: comfortable tap targets (at least ~40 px) for small icon buttons and links. */
@media (pointer: coarse), (max-width: 640px) {
  .st-dots, .um-icon-btn, .ju-kebab, .rvr-icon-btn, .rvr-note-close {
    min-width: 40px !important; min-height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center;
  }
  .vendor-btn-act, .vw-tab, .site-logout-btn, .se-nav-link, .rvr-row-act, .vendor-link { min-height: 40px !important; display: inline-flex !important; align-items: center; }
  .jnc-download-btn, .rvr-row-act { min-width: 40px; min-height: 40px; justify-content: center; }
  .rvr-crumbs a, .rvr-back-link { display: inline-flex !important; align-items: center; min-height: 40px; }
  /* sign-in and password recovery */
  #contactAdminBtn, #forgotBtn, .link-support-btn, .link-back-header { display: inline-flex; align-items: center; min-height: 40px; }
  .pwd-toggle-action, .field-clear-btn { min-width: 40px !important; min-height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { button.is-busy::after { animation: none; } }

/* Message dialogs fade out instead of vanishing. */
.oui-back.oui-closing { animation: rvrFadeOut .16s ease forwards; }
.oui-back.oui-closing .oui-box { animation: rvrPopOut .16s ease forwards; }
@keyframes rvrFadeOut { to { opacity: 0; } }
@keyframes rvrPopOut { to { opacity: 0; transform: translateY(6px) scale(.97); } }


/* Site Engineer and other phone screens: header fits the screen; the support button shrinks to an icon. */
@media (max-width: 640px) {
  .site-desktop-header-inner { gap: 8px; min-width: 0; }
  .site-header-actions { flex-wrap: nowrap !important; gap: 6px !important; min-width: 0; }
  .site-header-actions .site-user-name, .site-header-actions .site-logout-btn span, .site-role-badge { display: none !important; }
  .site-header-actions .se-nav-link span:not([id]) { display: none; }
  .site-header-actions .se-nav-link, .site-header-actions .site-logout-btn { min-width: 40px; justify-content: center; padding-left: 8px !important; padding-right: 8px !important; }
  .site-header-actions .site-pill { max-width: 46vw; min-width: 0; }
  #rvrUniversalSupportBtn { width: 52px !important; height: 52px !important; padding: 0 !important; border-radius: 50% !important; justify-content: center !important; gap: 0 !important; }
  #rvrUniversalSupportBtn .support-btn-label, #rvrUniversalSupportBtn .support-btn-badge { display: none !important; }
  body.site-eng-body { padding-bottom: 76px; }
}

/* Sortable headers and pager (components/TableTools.tsx). */
.rvr-sort-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.rvr-sort-btn:hover { color: #1d4ed8; }
.rvr-sort-ic { font-size: 10px; line-height: 1; }
.rvr-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 4px 2px; font-size: 13px; color: #475569; }
.rvr-pager-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rvr-pager-btns button { min-width: 34px; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid #e2e8f0; background: #ffffff; color: #334155; font: 600 12.5px inherit; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.rvr-pager-btns button:hover:not(:disabled) { border-color: #93c5fd; background: #eff6ff; }
.rvr-pager-btns button.on { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.rvr-pager-btns button:disabled { opacity: .45; }
.rvr-pager-gap { padding: 0 4px; color: #64748b; }
@media (pointer: coarse), (max-width: 640px) { .rvr-pager-btns button { min-width: 40px; height: 40px; } .rvr-sort-btn { min-height: 40px; } }

/* Frozen header: the table scrolls inside its box and the column titles stay visible. */
.rvr-freeze { max-height: 68vh; overflow: auto; }
.rvr-freeze > table > thead th { position: sticky; top: 0; z-index: 3; background: #f8fafc; box-shadow: inset 0 -2px 0 #e2e8f0; }

/* Three-dot actions menu (components/ActionMenu.tsx) */
.am-kebab { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; background: transparent; border-radius: 10px; cursor: pointer; }
.am-kebab:hover, .am-kebab.on { background: #f1f5f9; border-color: #e2e8f0; }
.am-menu { position: fixed; z-index: 1200; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 14px 34px rgba(15, 23, 42, .18); padding: 6px; text-align: left; animation: am-in .12s ease-out; }
@keyframes am-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.am-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: none; background: none; text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer; font: 600 13px/1.35 inherit; font-family: inherit; color: #1e2a5a; }
.am-item:hover:not([disabled]), .am-item:focus-visible { background: #eef2ff; outline: none !important; box-shadow: none !important; }
.am-item.danger { color: #b91c1c; }
.am-item.danger:hover:not([disabled]), .am-item.danger:focus-visible { background: #fef2f2; }
.am-item[disabled] { color: #64748b; cursor: not-allowed; }
.am-ic { display: inline-flex; width: 18px; padding-top: 1px; flex-shrink: 0; }
.am-txt { display: flex; flex-direction: column; min-width: 0; }
.am-txt small { font-weight: 500; font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.am-div { height: 1px; background: #eef2f7; margin: 4px 4px; }

/* Header site switcher ("📍 Site ▾", components/shell/SiteSwitcher.tsx) */
.ss-wrap { position: relative; display: inline-flex; }
.ss-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; z-index: 1300; }
.ss-menu .am-item.on { background: #eff6ff; }
.ss-menu .am-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* Shared buttons (components/Button.tsx). Primary takes the portal's accent (set on <body> by the shell). */
.ob-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: 10px; border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, filter .15s;
}
.ob-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ob-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; gap: 4px; }
.ob-sm svg { width: 12px; height: 12px; }
.ob-block { width: 100%; }
.ob-primary { background: var(--ob-accent, #2563eb); color: var(--ob-on-accent, #ffffff); }
.ob-primary:hover:not(:disabled) { filter: brightness(.93); }
.ob-secondary { background: #ffffff; border-color: #cbd5e1; color: #334155; }
.ob-secondary:hover:not(:disabled) { background: #f8fafc; border-color: #94a3b8; }
.ob-success { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.ob-success:hover:not(:disabled) { background: #bbf7d0; }
.ob-danger { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.ob-danger:hover:not(:disabled) { background: #fecaca; }
.ob-ghost { background: transparent; color: #475569; }
.ob-ghost:hover:not(:disabled) { background: #f1f5f9; }
.ob-btn:disabled { opacity: .55; cursor: not-allowed; filter: saturate(.6); }

/* Inline field errors (lib/ux.ts): the message under the field, and a red outline on the field. */
.ob-field-error { color: #b91c1c; font-size: 12px; font-weight: 600; margin-top: 4px; line-height: 1.4; }
.ob-field-error::before { content: '⚠ '; }
[aria-invalid="true"]:not(:focus-visible) { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important; }
.um-in:has([aria-invalid="true"]) { border-color: #dc2626 !important; }

/* Phones: 16px form text, so iOS does not zoom in when a field is tapped (pinch-zoom itself stays enabled). */
@media (max-width: 768px) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}

/* A button that reads as a link / plain text (e.g. an agency name that opens its statement). */
.rvr-link-btn { background: none; border: none; padding: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.rvr-link-btn:hover { text-decoration: underline; }

/* Design scale (every font size, spacing and corner radius in the app snaps to these steps).
   Type:    10 micro badge · 11 caption / table head · 12 small · 13 body (dense) · 14 body · 16 lead
            18 · 20 · 22 · 24 headings · 28 · 32 page titles
   Spacing: even pixels (2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24), multiples of 4 above 24
   Radius:  4, 6, 8, 10, 12, 16, 20, 24, full (999px)                                            */
:root {
  --fs-micro: 10px; --fs-caption: 11px; --fs-small: 12px; --fs-dense: 13px; --fs-body: 14px; --fs-lead: 16px;
  --fs-h4: 18px; --fs-h3: 20px; --fs-h2: 24px; --fs-h1: 28px; --fs-display: 32px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 6px; --radius: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px;
}

/* Compact site card on the overview: progress drops under the details on narrow screens. */
@media (max-width: 760px) { .site-detail-compact { grid-template-columns: minmax(0, 1fr) !important; } }

/* Overview figures stay on one line; long ones (e.g. "7,250.0 km") shrink with the card instead of wrapping. */
.overview-kpi-card > div:first-child { min-width: 0; flex: 1 1 auto; }
.overview-kpi-val { white-space: nowrap; font-size: clamp(16px, 1.4vw, 24px) !important; }
.overview-kpi-card .overview-kpi-art { flex-shrink: 1; min-width: 0; max-width: 36%; height: auto; }