/* One header, Refresh control and account footer for My Work and My Pay.
   Page content keeps its own stylesheet. This file never positions staff nav. */
.technician-header {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
  flex-wrap: nowrap; gap: 18px; min-height: 82px;
  padding: 12px max(18px, calc((100vw - 960px) / 2));
  background: #17375a; color: #fff; border-bottom: 1px solid #244a72;
  box-shadow: 0 2px 8px #17375a0d;
}
.technician-header > a { padding: 0; background: transparent; flex-shrink: 0; }
.technician-header img { display: block; width: 125px; height: 42px; object-fit: contain; background: #fff; border-radius: 9px; padding: 3px; }
.technician-header > div { flex: 1; min-width: 0; }
.technician-header :is(span, small) { font-size: 10px; letter-spacing: .15em; color: #bfdaf4; }
.technician-header h1 { font-size: 23px; margin: 0; letter-spacing: -.025em; }
.technician-header .refresh-button {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0;
  border: 1px solid #c9d6e5; border-radius: 12px; background: #fff; color: #254969;
  box-shadow: 0 1px 2px #17375a06; opacity: 1; cursor: pointer;
}
.refresh-button svg { display: block; width: 26px; height: 26px; }
.refresh-button .refresh-check { display: none; }
.technician-header .refresh-button[data-refresh-state="loading"] { background: #eaf2ff; border-color: #8babd9; color: #1756a5; cursor: progress; }
.refresh-button[data-refresh-state="loading"] svg { animation: field-refresh-spin .8s linear infinite; }
.technician-header .refresh-button[data-refresh-state="success"] { background: #eefaf3; border-color: #99cbb0; color: #17623c; }
.refresh-button[data-refresh-state="success"] .refresh-arrow { display: none; }
.refresh-button[data-refresh-state="success"] .refresh-check { display: block; }
.technician-header .refresh-button[data-refresh-state="error"] { background: #fff1f3; border-color: #e0abb5; color: #9e2637; }
@keyframes field-refresh-spin { to { transform: rotate(360deg); } }
.technician-account {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  align-items: stretch; gap: 12px;
  padding: 18px max(18px, calc((100% - 960px) / 2)) calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--wr-line); background: #fff;
}
.technician-account > :is(a, button) {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 0; min-height: 48px; margin: 0; padding: 12px 10px;
  font: inherit; font-weight: 650; text-align: center; text-decoration: none; overflow-wrap: anywhere;
  border: 1px solid #c9d6e5; border-radius: 12px; background: #fff; color: #254969;
  box-shadow: 0 1px 2px #17375a06; cursor: pointer;
  transition: background var(--wr-fast),border-color var(--wr-fast),box-shadow var(--wr-fast);
}
.technician-account > :is(a, button):focus-visible,.technician-header .refresh-button:focus-visible { outline: 3px solid #2281e7; outline-offset: 3px; }
.technician-account > :is(a, button):active { box-shadow: inset 0 1px 3px #17375a22; }
@media (hover: hover) {
  .technician-account > :is(a, button):hover { background: #f1f6fd; border-color: #9cb8db; }
}
@media (max-width: 650px) {
  .technician-header { padding: 12px 14px; gap: 12px; }
  .technician-header img { width: 92px; height: 36px; }
  .technician-header h1 { font-size: 21px; }
}
@media (max-width: 360px) {
  .technician-account { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .refresh-button svg { animation: none !important; }
  .technician-account > :is(a, button) { transition: none; }
}