/* Ritchie Bros. brand foundation — shared across all pages.
   2026 brand guidelines: black/white dominant, orange as a 10–15% accent.

   Typography: the UI is set in Inter, the Ag Guide's own typeface (Alana's
   Typeface Guide, 2026-08-13; the printed page is set in Inter Light /
   Regular / SemiBold / Bold from public/fonts/inter, SIL OFL). Roboto stays
   as the brand's approved fallback, then the system face.

   Font files are addressed relative to this stylesheet (../fonts/...) so
   they resolve under any base path the app is mounted at.

   Visual system (2026-09-11 redesign): a soft neutral canvas with a faint
   warm wash, white cards with hairline borders and ambient shadows, frosted
   glass for the surfaces that float over scrolling content (the top nav,
   dropdowns, the output dock), filled form fields with a soft focus halo,
   and custom native controls. Black is the working colour; orange is kept
   for the one primary action on a page, focus, and small live signals. */

@font-face {
  font-family: 'Inter';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter/Inter-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter/Inter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter/Inter-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter/Inter-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
}

:root {
  color-scheme: light;

  /* Primary palette */
  --rb-white: #FFFFFF;
  --rb-black: #000000;
  --rb-orange: #E87511;

  /* Black tints (per brand guideline ramp) */
  --rb-black-90: #191919;
  --rb-black-80: #323232;
  --rb-black-70: #4C4C4C;
  --rb-black-60: #666666;
  --rb-black-50: #7F7F7F;
  --rb-black-40: #999999;
  --rb-black-30: #B2B2B2;
  --rb-black-20: #CCCCCC;
  --rb-black-10: #E5E5E5;
  --rb-black-05: #F4F4F4;

  /* Semantic UI tokens */
  --bg: #F3F3F2;
  --surface: var(--rb-white);
  --surface-alt: #F6F6F5;
  --fg: #111111;
  --fg-muted: var(--rb-black-60);
  --fg-subtle: var(--rb-black-50);
  --fg-label: var(--rb-black-70);
  --border: rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.14);
  --hairline: rgba(0, 0, 0, 0.06);
  --accent: var(--rb-orange);
  --accent-hover: #D66A0C;
  /* Dark-orange foreground for small labels/status text. Brand orange itself
     is reserved for larger fills and decoration because it misses 4.5:1. */
  --accent-text: #A64F00;
  --accent-soft: rgba(232, 117, 17, 0.10);
  --focus-ring: rgba(232, 117, 17, 0.28);

  /* Form fields: a filled field on a white card, lit white on focus. */
  --field-bg: #F5F5F4;
  --field-bg-hover: #EFEFEE;
  --field-line: rgba(0, 0, 0, 0.06);

  /* Frosted surfaces. */
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.86);
  /* A modest kernel: the nav and the output dock blur whatever scrolls
     under them on every frame, photo thumbnails included. */
  --glass-blur: blur(14px);

  /* Geometry and elevation. Pages opt into these tokens rather than
     inventing radii and shadows per surface. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.03), 0 10px 30px -12px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 50px -16px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 24px 80px -20px rgba(0, 0, 0, 0.28);

  /* State colors — muted, used only as semantic UX indicators. */
  --state-success: #1B7F3B;
  --state-success-bg: rgba(27, 127, 59, 0.10);
  --state-error: #B0271A;
  --state-error-bg: #FBE9E7;
  --state-warning: #9A5B00;
  --state-warning-bg: rgba(232, 117, 17, 0.10);

  /* Typography */
  --font-headline: 'Inter', 'Eina 01', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Eina 01', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nav-h: 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* App-wide canvas. Painting html as well as body matters: body's
   min-height:100% never resolves against html's auto height, so body's
   background alone stops at content height and short pages would show a
   white void below the content. */
html, body { min-height: 100%; background: var(--bg); }
/* The wash below is a negative-z child of the root stacking context, which
   paints above the canvas but under any opaque body background, so body
   stays transparent and html alone paints the base colour. */
body { background: transparent; }
/* A faint warm wash behind everything: depth without colour noise, and well
   inside the brand's orange budget. Fixed so it never scrolls or repeats. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 520px at 8% -12%, rgba(232, 117, 17, 0.11), transparent 62%),
    radial-gradient(900px 520px at 100% -6%, rgba(0, 0, 0, 0.045), transparent 60%),
    radial-gradient(700px 400px at 50% 110%, rgba(232, 117, 17, 0.05), transparent 60%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.015em;
}

/* Shared page-header text. Pages own the #page-head layout (column by
   default; meta runs a row) but the title/subtitle type is one system. */
#page-head h1 {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--fg);
}
.page-sub {
  margin: 0;
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.5;
  max-width: 64ch;
}

a { color: var(--fg); }
a:hover { color: var(--accent-text); }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--fg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: rgba(232, 117, 17, 0.25); }

/* Shared topnav used by every app page: a frosted bar the page scrolls
   under. flex-wrap is unconditional: it only engages when the links actually
   overflow, and a hard breakpoint would leave a dead band (nowrap links
   cannot shrink) just above whatever width was picked — the injected Admin
   link makes the nav wider for superadmins, so no single breakpoint is right
   for everyone. */
.rb-topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: var(--nav-h);
  padding: 10px 28px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 50;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rb-topnav { background: rgba(255, 255, 255, 0.96); }
}
.rb-topnav .rb-logo {
  display: inline-flex;
  align-items: center;
  margin-right: 22px;
}
.rb-topnav .rb-logo img {
  display: block;
  height: 26px;
  width: auto;
}
.rb-topnav a {
  color: var(--fg-muted);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.rb-topnav a:hover {
  color: var(--fg);
  background: rgba(0, 0, 0, 0.05);
}
.rb-topnav a.active {
  color: var(--fg);
  background: rgba(0, 0, 0, 0.065);
  position: relative;
}
.rb-topnav a.logout {
  margin-left: auto;
  color: var(--fg-subtle);
}

/* Tighter nav metrics once wrapping is likely, so it costs fewer rows. */
@media (max-width: 920px) {
  .rb-topnav {
    padding: 8px 16px;
    gap: 0 2px;
  }
  .rb-topnav .rb-logo { margin-right: 12px; }
  .rb-topnav a { padding: 7px 11px; }
}

/* A four-row sticky nav consumes most of a phone viewport. Keep the complete
   information architecture, but present it as one touch-scrollable rail. */
@media (max-width: 640px) {
  .rb-topnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 8px 12px;
    scrollbar-width: none;
  }
  .rb-topnav::-webkit-scrollbar { display: none; }
  .rb-topnav .rb-logo {
    flex: 0 0 auto;
    margin-right: 8px;
  }
  .rb-topnav .rb-logo img { height: 24px; }
  .rb-topnav a { flex: 0 0 auto; }
  .rb-topnav a.logout { margin-left: 0; }
}

/* Shared card: the surface every page builds its sections from. `.group`
   is the form-section flavour (a column of controls with a title). */
.rb-card,
.group {
  padding: 24px 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rb-card > h3,
.group h3 {
  margin: 0 0 2px;
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--fg);
}
.hint {
  color: var(--fg-muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .rb-card,
  .group { padding: 20px 18px 22px; border-radius: 18px; }
}

/* The newer-build bar (shared/version-watch.js): a dark floating pill,
   centred by auto margins between left:0 and right:0 (a fixed box placed
   with left:50% would shrink-to-fit the half viewport to its right). */
#app-version-bar {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 100000;
  width: fit-content;
  max-width: min(920px, calc(100vw - 24px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 17, 17, 0.92);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--rb-white);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
}
#app-version-bar .rb-btn {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}
#app-version-bar .app-version-later {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--rb-white);
}
#app-version-bar .app-version-later:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--rb-white);
}

/* Shared empty-state block — pages drop this in where a list/grid would
   render when there is nothing to show yet. */
.rb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 48px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}
.rb-empty-title {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
}
.rb-empty-sub {
  font-size: 13px;
  color: var(--fg-muted);
  max-width: 44ch;
}
.rb-empty a { color: var(--fg); font-weight: 600; }
.rb-empty a:hover { color: var(--accent-text); }

/* Shared form controls: a filled field that lights up white on focus with a
   soft halo. Pages may extend, but should not redefine these primitives.
   The height comes from padding + line-height (44px), never min-height, so
   the compact controls pages build on top (photo captions, size steppers)
   keep their own padding without fighting a floor. */
.rb-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  background: var(--field-bg);
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  line-height: 22px;
  box-shadow: inset 0 0 0 1px var(--field-line);
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
  width: 100%;
}
input[type="search"] { -webkit-appearance: none; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input::placeholder, textarea::placeholder {
  color: var(--rb-black-40);
  opacity: 1;
}
.rb-input:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
select:hover,
textarea:hover {
  background-color: var(--field-bg-hover);
}
input:focus, textarea:focus, select:focus, .rb-input:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
input[aria-invalid="true"] {
  border-color: var(--state-error);
}
input:disabled, select:disabled, textarea:disabled {
  color: var(--fg-subtle);
  background-color: var(--field-bg);
  cursor: not-allowed;
}
textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
  font-family: var(--font-body);
}
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23666666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
  cursor: pointer;
}
select:disabled { cursor: not-allowed; }
input[type="date"] {
  cursor: text;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* File pickers: the native control, dressed as a soft button. */
input[type="file"] {
  font-size: 13px;
  color: var(--fg-muted);
  width: 100%;
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  margin-right: 10px;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
input[type="file"]::file-selector-button:hover {
  background: var(--field-bg-hover);
  border-color: var(--border-strong);
}

/* Checkboxes and radios: drawn by hand so they match the fields. Black
   when on (black is the working colour; orange stays for the primary
   action and live signals). */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1.5px solid var(--rb-black-30);
  border-radius: 5px;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before,
input[type="radio"]::before {
  content: '';
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform 0.15s var(--ease);
}
input[type="checkbox"]::before {
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="radio"]::before {
  border-radius: 50%;
  background: var(--surface);
  width: 8px;
  height: 8px;
}
input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--rb-black-60); }
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--fg);
  border-color: var(--fg);
}
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--focus-ring);
  border-color: var(--accent);
}
input[type="checkbox"]:checked:focus,
input[type="radio"]:checked:focus {
  background: var(--fg);
  border-color: var(--fg);
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Switch: a checkbox with class rb-switch reads as an on/off toggle. */
input[type="checkbox"].rb-switch {
  width: 38px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--rb-black-20);
  position: relative;
  display: inline-block;
}
input[type="checkbox"].rb-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: none;
  transition: transform 0.2s var(--ease);
}
input[type="checkbox"].rb-switch:hover { background: var(--rb-black-30); }
input[type="checkbox"].rb-switch:checked { background: var(--fg); }
input[type="checkbox"].rb-switch:checked::before { transform: translateX(16px); }
input[type="checkbox"].rb-switch:focus,
input[type="checkbox"].rb-switch:checked:focus {
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* Buttons.
   - .rb-btn (default) = soft neutral button: a quiet grey fill, no outline.
   - .rb-btn-primary = solid black button with white text.
   - .rb-btn-accent  = orange button — reserve for the single primary CTA on
     the page (per brand: orange limited to 10–15% of the design).
   The bare `button` rule keeps exactly this property set: pages build tiny
   controls (photo overlays, steppers) on top of it and override what they
   need, so adding a property here would leak into all of them. */
button,
.rb-btn {
  background: var(--field-bg);
  color: var(--fg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.12s var(--ease);
}
.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}
button:hover:not(:disabled),
.rb-btn:hover:not(:disabled) {
  background: var(--field-bg-hover);
  color: var(--fg);
  border-color: var(--border-strong);
}
.rb-btn:active:not(:disabled),
.rb-btn-primary:active:not(:disabled),
.rb-btn-accent:active:not(:disabled) {
  transform: scale(0.985);
}
button:disabled,
.rb-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.rb-btn-primary {
  background: var(--fg);
  color: var(--rb-white);
  border-color: var(--fg);
}
.rb-btn-primary:hover:not(:disabled) {
  background: var(--rb-black-80);
  color: var(--rb-white);
  border-color: var(--rb-black-80);
}

.rb-btn-accent {
  background: linear-gradient(180deg, #F0842A 0%, var(--accent) 100%);
  /* Brand orange + white is only ~3:1. Near-black preserves the approved
     orange while clearing AA contrast for normal-size button labels. */
  color: var(--rb-black-90);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 20px -10px rgba(232, 117, 17, 0.7);
}
.rb-btn-accent:hover:not(:disabled) {
  background: linear-gradient(180deg, #E97A1E 0%, var(--accent-hover) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--rb-black-90);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -10px rgba(232, 117, 17, 0.8);
}
.rb-btn-accent:disabled {
  background: var(--rb-black-10);
  border-color: transparent;
  color: var(--rb-black-50);
  box-shadow: none;
  opacity: 1;
}

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

/* The `hidden` attribute must always win. Author rules like display:flex on
   a section otherwise beat the UA's [hidden] { display: none } and leave
   "hidden" content visible — every page toggling `hidden` on styled
   containers relies on this. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}