/* JK FieldOps shared visual language.
 * Derived from the supplied marketing site's navy / orange palette.
 * Load after app.css; mobile.css remains responsible for responsive layout.
 * Document images, PDF fields and signature canvases deliberately retain
 * their own sizing, positioning and input behavior.
 */
:root {
  --jk-navy: #11243a;
  --jk-navy-raised: #1c3652;
  --jk-orange: #ff8b40;
  --jk-orange-hover: #ffa366;
  --jk-ink: #202d3c;
  --jk-muted: #526174;
  --jk-link: #205b87;
  --jk-paper: #f2f5f8;
  --jk-surface: #ffffff;
  --jk-surface-subtle: #edf2f6;
  --jk-line: #d9e1e8;
  --jk-input-line: #7c8b9a;
  --jk-success: #17684f;
  --jk-success-bg: #e8f3ee;
  --jk-warning: #854000;
  --jk-warning-bg: #fff0de;
  --jk-danger: #982e2e;
  --jk-danger-bg: #fff0f0;
  --jk-focus: #205b87;
  --jk-radius: 8px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--jk-ink);
  background: var(--jk-paper);
  color-scheme: light;
}

body, body.recovery-page {
  color: var(--jk-ink);
  background: var(--jk-paper);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

button, input, select, textarea { font-family: inherit; }
button, a, summary { touch-action: manipulation; }
a { color: var(--jk-link); text-underline-offset: 3px; }
h1, h2, h3, h4 { color: var(--jk-navy); }
h1 { font-size: 28px; line-height: 1.18; letter-spacing: -.025em; }
h2 { line-height: 1.3; letter-spacing: -.015em; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--jk-focus);
  outline-offset: 3px;
}

/* The original website identity anchors every application shell. */
.topbar, .recovery-topbar, .mobile-field-nav {
  background: var(--jk-navy);
  color: #fff;
  border-color: var(--jk-navy-raised);
}
.topbar .brand > a, .recovery-topbar > a, .jk-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-decoration: none;
  color: #fff;
}
.jk-brand-mark { display: block; width: 32px; height: 32px; flex: 0 0 32px; }
.topbar .brand-org { color: #d3deeb; opacity: 1; font-weight: 500; }
.topbar nav > a, .topbar .link-button { font-size: 13px; font-weight: 600; }
.topbar nav > a:hover, .topbar .link-button:hover {
  color: #ffd0b0;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.topbar :focus-visible, .recovery-topbar :focus-visible,
.mobile-field-nav :focus-visible { outline-color: #ffb47f; }
.mobile-field-nav .mobile-field-upload {
  background: var(--jk-orange);
  color: var(--jk-navy);
}

/* Compact content surfaces and tables keep the existing layout. */
.card, .panel, .auth-card, .recovery-card, .table-wrap,
.project-ticket-group, .week-ticket-group, .activity-group,
.rate-type-block, .platform-nav, .section-nav {
  background-color: var(--jk-surface);
  border-color: var(--jk-line);
  border-radius: var(--jk-radius);
}
.card, .panel, .auth-card, .recovery-card { box-shadow: 0 1px 3px #11243a09; }
.muted, .help, .helptext, .heading-note, .card span,
.table-subtext, .group-summary, .file-meta, .file-meta-row,
.ticket-results-count, .recovery-hint { color: var(--jk-muted); }
.card strong, .money-cell, .ticket-money-summary strong,
.week-ticket-meta strong { color: var(--jk-navy); font-variant-numeric: tabular-nums; }
th, .ticket-table-scroll th { color: #42536a; background: var(--jk-surface-subtle); }
th, td { border-bottom-color: var(--jk-line); }
td a, .crumb, .section-nav a { color: var(--jk-link); }
td a:hover, .crumb:hover { text-decoration: underline; }
.project-ticket-group > summary, .activity-group > summary,
.platform-user-create > summary, .rate-type-heading {
  background: var(--jk-surface-subtle);
  color: var(--jk-navy);
}
.week-ticket-group > summary { background: #f8fafc; }
.card.good { border-left-color: var(--jk-success); }
.card.warn { border-left-color: #b35a15; }
.card.bad { border-left-color: var(--jk-danger); }

/* Shared actions: orange with dark text avoids low-contrast white on orange. */
.btn, .agreements-app .btn {
  color: var(--jk-ink);
  background: var(--jk-surface);
  border: 1px solid var(--jk-input-line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
  text-align: center;
}
.btn:hover:not(:disabled):not(.disabled),
.agreements-app .ag-detail .btn:hover:not(:disabled):not(.disabled) {
  background: var(--jk-surface-subtle);
  border-color: var(--jk-link);
}
.btn.primary, .agreements-app .ag-detail .btn.primary,
.recovery-card button, .recovery-card .recovery-button {
  color: var(--jk-navy);
  background: var(--jk-orange);
  border-color: #aa4d10;
  font-weight: 750;
}
.btn.primary:hover:not(:disabled):not(.disabled),
.agreements-app .ag-detail .btn.primary:hover:not(:disabled):not(.disabled),
.recovery-card button:hover:not(:disabled), .recovery-card .recovery-button:hover {
  color: var(--jk-navy);
  background: var(--jk-orange-hover);
  border-color: #aa4d10;
}
.btn.danger, .agreements-app .btn.danger {
  color: var(--jk-danger);
  background: var(--jk-danger-bg);
  border-color: #c77676;
}
.btn.danger:hover:not(:disabled):not(.disabled) { background: #ffe1e1; border-color: var(--jk-danger); }
.btn.small { font-size: 13px; }
.btn:disabled, .btn.disabled, .recovery-card button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Native form controls remain native, including keyboard and autofill. */
form :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
.recovery-card input {
  color: var(--jk-ink);
  background-color: var(--jk-surface);
  border-color: var(--jk-input-line);
  border-radius: 6px;
}
form :is(input, textarea)::placeholder { color: #657488; opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--jk-link); }
form :is(input, textarea)[readonly] { background-color: var(--jk-surface-subtle); }
form :is(input, select, textarea):disabled { background-color: var(--jk-surface-subtle); color: var(--jk-muted); }
form [aria-invalid="true"] { border-color: var(--jk-danger); }
.errorlist, .recovery-card .errorlist { color: var(--jk-danger); }

/* Shared status vocabulary preserves both labels and semantic color. */
.status, .status.neutral, .status.pending, .status.draft, .status.archived,
.badge, .ag-badge {
  color: #42546d;
  background: #eaf0f7;
}
.status.reconciled, .status.ready, .status.complete, .status.paid,
.status.approved, .status.reviewed, .status.resolved, .badge.ok,
.check.yes, .ag-badge.complete, .agreements-app .ag-needed {
  color: var(--jk-success);
  background: var(--jk-success-bg);
}
.status.open, .status.review, .status.payment-pending {
  color: var(--jk-warning);
  background: var(--jk-warning-bg);
}
.status.error, .status.failed, .status.voided {
  color: var(--jk-danger);
  background: var(--jk-danger-bg);
}
.notice, .recovery-notice {
  color: #704000;
  background: #fff4e6;
  border-color: #e0b777;
}
.notice.good-notice { color: var(--jk-success); background: var(--jk-success-bg); border-color: #9bbdab; }
.notice.error-notice { color: var(--jk-danger); background: var(--jk-danger-bg); border-color: #c77676; }
.platform-context-bar { color: #704000; background: #fff4e6; border-color: #e0b777; }
.platform-nav a.active, .platform-nav a[aria-current="page"],
.section-nav a[aria-current="page"], .field-status-links a.active {
  color: var(--jk-navy);
  background: #e6eef6;
  box-shadow: inset 0 -3px 0 #b95415;
}

/* Authentication uses the same compact branded surfaces as the app. */
.auth-card, .recovery-card { border-top: 3px solid var(--jk-orange); }
.auth-card h1, .recovery-card h1 { color: var(--jk-navy); font-size: 25px; }
.auth-card form > p { display: grid; gap: 6px; }
.auth-card label, .recovery-card label { font-weight: 650; }
.auth-card input:not([type="checkbox"]):not([type="hidden"]) { min-width: 0; width: 100%; min-height: 44px; font-size: 16px; }
.auth-card form > .btn { min-height: 44px; width: 100%; }
.account-recovery-links a, .recovery-card a { color: var(--jk-link); }
.recovery-card .recovery-button { color: var(--jk-navy); }

/* Agreement controls share the palette. The PDF and drawings are untouched. */
.agreements-app .ag-detail {
  --ag-blue: var(--jk-link);
  --ag-blue-light: #eaf0f7;
  --ag-line: var(--jk-line);
  --ag-muted: var(--jk-muted);
  color: var(--jk-ink);
}
.agreements-app .ag-detail .ag-control input,
.agreements-app .ag-detail .ag-control select { border-color: var(--jk-input-line); }
.agreements-app .ag-detail .ag-field-buttons [aria-pressed="true"] {
  color: #fff;
  background: var(--jk-navy);
  border-color: var(--jk-navy);
}
.field-upload-icon { background: var(--jk-navy); }
.field-upload-hero { color: var(--jk-navy); border-color: #7c8b9a; background: #f8fafc; }
.field-entry-card.haul { border-left-color: var(--jk-link); }
.field-entry-card.cut { border-left-color: var(--jk-success); }

/* Desktop reading size; retain the phone/tablet sizing already verified.
 * Keep image/PDF/signature geometry independent of interface typography.
 */
@media (min-width: 1101px) {
  body, body.recovery-page { font-size: 16px; line-height: 1.5; }
  .topbar nav > a, .topbar .link-button { font-size: 15px; }
  .btn, .agreements-app .btn { font-size: 15px; }
  .btn.small { font-size: 14px; }
  th, .ticket-table-scroll th { font-size: 13px; }
  .container :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .recovery-card input { font-size: 16px; }
  .container :is(.help, .helptext, .small-text, .table-subtext, .file-meta,
    .file-meta-row, .group-summary, .ticket-results-count, .recon-reasons,
    .recon-week-subtext, .user-role-capabilities, .company-activity),
  .container .card span,
  .container :is(.setup-summary-cards, .setup-project-summary, .ap-summary-cards, .ap-sub-summary-cards) .card small,
  .container :is(.setup-equipment-filters, .setup-company-filters, .setup-user-filters) .form-row > label,
  .container :is(.review-edit-form, .document-upload-form, .payout-filter-grid,
    .payout-detail-fields, .payout-draft-edit, .payout-payment-form) label {
    font-size: 14px;
  }
}

@media (max-width: 760px) {
  h1 { font-size: 24px; }
  .jk-brand-mark { width: 28px; height: 28px; flex-basis: 28px; }
  .topbar .brand > a { font-size: 17px; }
  .recovery-topbar { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .setup-tile, .field-entry-card { transition: none; }
}

@media (forced-colors: active) {
  .btn, .status, .badge, .ag-badge { border: 1px solid ButtonText; }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}

/* BRANDING-1: one wordmark on a white panel with a 45-degree navy transition. */
.topbar, .recovery-topbar { padding: 0 24px 0 0; gap: 20px; align-items: stretch; }
.topbar .brand, .recovery-topbar .brand { display: flex; align-items: stretch; gap: 24px; min-width: 0; flex-shrink: 0; }
.topbar .brand > a.jk-brand-panel, .recovery-topbar .jk-brand-panel {
  box-sizing: border-box; position: relative; isolation: isolate; display: inline-flex; align-items: center;
  min-height: 72px; padding: 16px 12px 16px 24px; margin-right: 36px;
  background: #fff; color: #11243a; flex: 0 0 auto; white-space: nowrap;
  text-decoration: none; overflow: visible;
}
.jk-brand-panel::after {
  content: ""; position: absolute; z-index: -1; top: 0; left: calc(100% - 1px);
  height: 100%; aspect-ratio: 1; background: #fff;
  clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none;
}
.jk-brand-name { display: inline-flex; align-items: baseline; gap: .24em; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1.2; }
.jk-brand-initials { color: #c7520a; }
.jk-brand-product { color: #11243a; }
.topbar .brand-org, .topbar .brand-context, .recovery-topbar .brand-context {
  align-self: center; max-width: 240px; color: #d3deeb; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .jk-brand-panel:focus-visible, .recovery-topbar .jk-brand-panel:focus-visible {
  outline: 3px solid #205b87; outline-offset: -6px;
}
.topbar nav { padding-block: 12px; align-content: center; }
.dashboard-attention .attention-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 12px; }
.dashboard-attention .attention-card {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 70px; padding: 16px; border: 1px solid #d9e1e8; border-radius: 8px;
  color: #11243a; background: #f8fafc; text-decoration: none; font-weight: 650;
}
.dashboard-attention .attention-card:hover { border-color: #205b87; background: #edf2f6; }
.dashboard-attention .attention-card strong {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 34px; min-height: 34px; padding: 4px 10px; border-radius: 20px;
  background: #fff0de; color: #854000; font-size: 18px; font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .topbar, .field-mobile-capable .topbar { padding: 0 14px 0 0; gap: 0 14px; align-items: center; }
  .topbar .brand, .field-mobile-capable .topbar .brand {
    flex: 1 1 180px; flex-direction: column; align-items: flex-start; overflow: visible; gap: 0;
  }
  .topbar .brand > a.jk-brand-panel { min-height: 60px; padding: 16px 10px 16px 14px; margin-right: 30px; max-width: none; }
  .jk-brand-name { font-size: 23px; }
  .topbar .brand .brand-org, .topbar .brand .brand-context { align-self: flex-start; padding: 6px 0 8px 14px; font-size: 12px; max-width: 100%; }
  .topbar #jk-primary-navigation, .field-mobile-capable .topbar #jk-primary-navigation { margin: 0 0 0 14px; width: calc(100% - 14px); flex-basis: calc(100% - 14px); padding: 10px 0; }
  .topbar .jk-menu-toggle { margin-block: 8px; }
  .recovery-topbar { min-height: 60px; }
  .recovery-topbar .jk-brand-panel { min-height: 60px; padding: 16px 10px 16px 14px; }
}
@media (max-width: 360px) {
  .topbar .brand > a.jk-brand-panel { padding-left: 12px; padding-right: 2px; }
  .jk-brand-name { font-size: 21px; }
}

/* HEADER-1: shared navigation remains visible without covering sticky panels. */
:root { --jk-header-height: 72px; }
html { scroll-padding-top: calc(var(--jk-header-height) + 16px); }
.topbar { position: sticky; top: 0; z-index: 50; }
.section-nav, .platform-nav { top: calc(var(--jk-header-height) + 8px); }
.document-panel, .setup-form-panel, .rate-form-panel { top: calc(var(--jk-header-height) + 16px); }
.field-ticket-preview-panel { top: calc(var(--jk-header-height) + 14px); }
@media (max-width: 1100px) {
  .topbar { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
}
@media print {
  .topbar { position: static; max-height: none; overflow: visible; }
  html { scroll-padding-top: 0; }
}

/* HEADER-TEXT-1: slightly larger navigation and organization wording. */
.topbar nav > a, .topbar .link-button { font-size: 17px; }
.topbar .brand-org, .topbar .brand-context { font-size: 14px; }
@media (max-width: 1100px) {
  .topbar .brand .brand-org, .topbar .brand .brand-context { font-size: 13px; }
}