/* =====================================================================
   FOR YOU WORK FORCE
   Old-school portal styling in the For You Digital palette.
   Navy #005079, gold #C8890F, sampled from the company logo.

   Every class name from the previous stylesheet is kept, so no page
   markup had to change. Square corners, ruled borders, beveled
   controls, Verdana body, Georgia headings.
   ===================================================================== */

:root {
  /* names kept from before so inline var() references keep working */
  --pine:      #005079;   /* primary navy  */
  --pine-deep: #003A58;   /* header navy   */
  --pine-soft: #DCE8F0;   /* pale blue     */
  --vermilion: #C8890F;   /* logo gold     */
  --amber:     #E0A81C;
  --paper:     #E7ECF0;
  --card:      #FFFFFF;
  --ink:       #1A1A1A;
  --ink-soft:  #4A5A66;
  --line:      #9FB0BE;
  --late:      #97231F;

  --rule:      #7F97A8;
  --zebra:     #F1F5F8;
  --bevel-hi:  #FFFFFF;
  --bevel-lo:  #8A9AA6;

  --r:    0;
  --r-sm: 0;
  --shadow: none;
  --mono: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }

/* the hidden attribute must beat any display rule below it */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Verdana, Geneva, Tahoma, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;

  /* sticky footer: the page fills the window, so the footer sits on the
     bottom edge on short pages and below the content on long ones */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  color: var(--pine-deep);
}
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 10px; }
h3 { font-size: 13px; margin: 0 0 6px; }

a         { color: #0A4E8A; text-decoration: underline; }
a:hover   { color: var(--vermilion); }
a:visited { color: #5B3A8E; }

.muted  { color: var(--ink-soft); }
.small  { font-size: 11px; }
.right  { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------------- masthead ---------------- */

.topbar {
  background: var(--pine-deep);
  background: linear-gradient(180deg, #04456A 0%, #003A58 100%);
  color: #E9F1F6;
  border-bottom: 3px solid var(--vermilion);
}

.topbar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .04em;
  color: #FFFFFF;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}
.brand:hover, .brand:visited { color: #FFFFFF; text-decoration: none; }

.brand__logo {
  height: 36px; width: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--vermilion);
  padding: 2px;
}
.brand__mark {
  width: 10px; height: 24px;
  background: var(--vermilion);
  border: 1px solid #8C5F06;
  display: inline-block;
}

.topbar__spacer { flex: 1; }

.who {
  font-size: 11px;
  color: #BCD2E0;
  text-align: right;
  line-height: 1.4;
  border-left: 1px solid #2A6081;
  padding-left: 12px;
}
.who strong { color: #FFFFFF; display: block; font-size: 12px; }
.who a { color: #F2C560; }

/* ---------------- navigation bar ---------------- */

.nav {
  background: #C9D8E3;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nav__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px;
  display: flex;
}
.nav a {
  color: #103F5E;
  text-decoration: none;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border-right: 1px solid #A9BCCA;
  border-bottom: 3px solid transparent;
}
.nav a:first-child { border-left: 1px solid #A9BCCA; }
.nav a:hover { background: #DCE7EF; color: #003A58; }
.nav a.is-on {
  background: #FFFFFF;
  color: var(--pine-deep);
  border-bottom-color: var(--vermilion);
}
.nav a:visited { color: #103F5E; }

/* ---------------- layout ---------------- */

.wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 14px 40px;
  flex: 1 0 auto;          /* takes the slack, pushing the footer down */
}
.wrap--narrow { max-width: 640px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pine);
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--pine);
  padding: 12px;
  margin-bottom: 14px;
}
.card--flush { padding: 0; }

/* a card that opens with a heading gets a proper title bar */
.card > h2:first-child {
  margin: -12px -12px 12px;
  padding: 6px 12px;
  background: #E3EBF1;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}

.card__head {
  padding: 6px 12px;
  border-bottom: 1px solid var(--rule);
  background: #E3EBF1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.card__head h2 { margin: 0; font-size: 14px; }

.grid { display: grid; gap: 12px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---------------- statistic boxes ---------------- */

.stat {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--pine);
  padding: 10px 12px;
}
.stat__num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--pine-deep);
}
.stat__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin-top: 3px;
  font-weight: 700;
}
.stat--accent { border-left-color: var(--vermilion); }

/* ---------------- forms ---------------- */

.field { margin-bottom: 12px; }
.field > label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--pine-deep);
  margin-bottom: 3px;
}

input[type=text], input[type=password], input[type=date], input[type=number],
input[type=email], input[type=tel], input[type=file], select, textarea {
  width: 100%;
  padding: 5px 6px;
  border: 2px inset #C4CED6;
  background: #FFFFFF;
  font-family: Verdana, Geneva, Tahoma, Arial, sans-serif;
  font-size: 12px;
  color: var(--ink);
  border-radius: 0;
}
textarea { min-height: 88px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: 1px dotted var(--pine);
  outline-offset: 1px;
  background: #FFFDF2;
}

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 170px; }

/* ---------------- beveled buttons ---------------- */

.btn {
  display: inline-block;
  padding: 5px 14px;
  border: 2px outset #B9C6D0;
  background: linear-gradient(180deg, #F4F7F9 0%, #D6E0E8 100%);
  color: var(--pine-deep);
  font-family: Verdana, Geneva, Tahoma, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
}
.btn:hover { background: linear-gradient(180deg, #FFFFFF 0%, #E2EAF0 100%); text-decoration: none; color: var(--pine-deep); }
.btn:active { border-style: inset; }
.btn:visited { color: var(--pine-deep); }

.btn--ghost {
  background: linear-gradient(180deg, #FFFFFF 0%, #E8EEF3 100%);
}

.btn--go {
  border-color: #E5C173;
  background: linear-gradient(180deg, #F0C463 0%, #C8890F 100%);
  color: #2A1B00;
}
.btn--go:hover { background: linear-gradient(180deg, #F6D284 0%, #D89A1C 100%); color: #2A1B00; }
.btn--go:visited { color: #2A1B00; }

.btn--wide { width: 100%; padding: 9px; font-size: 13px; text-align: center; }
.btn--sm { padding: 3px 9px; font-size: 11px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; border-style: solid; }

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 14px;
  padding: 10px;
  background: #DDE6EC;
  border: 1px solid var(--rule);
}
.filters .field { margin: 0; min-width: 140px; }
.filters .field > label { font-size: 10px; text-transform: uppercase; }

/* ---------------- ruled data tables ---------------- */

.table-scroll { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #FFFFFF;
}
table.data th {
  text-align: left;
  font-family: Verdana, Geneva, Tahoma, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--pine);
  padding: 6px 9px;
  border: 1px solid var(--rule);
  white-space: nowrap;
}
table.data td {
  padding: 6px 9px;
  border: 1px solid #C3CFD8;
  vertical-align: top;
}
table.data tbody tr:nth-child(even) { background: var(--zebra); }
table.data tbody tr:hover { background: #FFF8E2; }

.empty {
  padding: 26px 14px;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--rule);
  background: #FAFCFD;
  margin: 10px;
  font-size: 12px;
}
.empty strong {
  display: block;
  color: var(--pine-deep);
  font-family: Georgia, serif;
  font-size: 14px;
  margin-bottom: 4px;
}
.card .empty { margin: 0; }

/* ---------------- badges and notices ---------------- */

.badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #ECF1F5;
  color: #3C4A54;
  white-space: nowrap;
}
.badge--done { background: #DCE8F0; border-color: var(--pine); color: var(--pine-deep); }
.badge--wait { background: #FAEFD3; border-color: #C8890F; color: #7A5406; }
.badge--late { background: #F5DEDC; border-color: #97231F; color: var(--late); }
.badge--off  { background: #E8E8E8; border-color: #A8A8A8; color: #5A5A5A; }
.badge--soft { background: #E4ECF4; border-color: #7F97A8; color: #244B66; }

.note {
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  border: 1px solid;
  font-weight: 700;
}
.note--ok    { background: #E7F0D9; border-color: #6E8F3E; color: #33501A; }
.note--error { background: #F7E2E0; border-color: #97231F; color: #6E1512; }

.maplink { font-family: var(--mono); font-size: 11px; }

/* ---------------- sign-in screen ---------------- */

.login-shell {
  flex: 1 0 auto;          /* the sign-in screen has no footer of its own */
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #C9D8E3;
  background-image: repeating-linear-gradient(
    180deg, rgba(255,255,255,.5) 0 1px, transparent 1px 4px);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--pine);
  padding: 0 0 18px;
}
.login-card .brand {
  background: linear-gradient(180deg, #04456A 0%, #003A58 100%);
  border-bottom: 3px solid var(--vermilion);
  color: #FFFFFF;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 15px;
}
.login-card form,
.login-card .note,
.login-card > p { margin-left: 18px; margin-right: 18px; }
.login-card .note { margin-bottom: 14px; }

/* ---------------- staff day rail ---------------- */

.rail { list-style: none; margin: 0; padding: 0 0 0 24px; position: relative; }
.rail::before {
  content: "";
  position: absolute;
  left: 6px; top: 5px; bottom: 5px;
  width: 1px;
  background: var(--rule);
}
.rail__item { position: relative; padding: 0 0 16px; }
.rail__item::before {
  content: "";
  position: absolute;
  left: -24px; top: 4px;
  width: 13px; height: 13px;
  background: #FFFFFF;
  border: 2px solid var(--rule);
}
.rail__item--done::before { background: var(--pine); border-color: var(--pine-deep); }
.rail__item--now::before  { background: var(--vermilion); border-color: #8C5F06; }
.rail__time { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.rail__title { font-weight: 700; color: var(--pine-deep); }

/* ---------------- work cards ---------------- */

.worklist { display: grid; gap: 8px; }
.work {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-left: 5px solid var(--amber);
  padding: 9px 11px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.work:hover { background: #FFF8E2; text-decoration: none; color: inherit; }
.work:visited { color: inherit; }
.work--done { border-left-color: var(--pine); }
.work--high { border-left-color: var(--late); }
.work__top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.work__title { font-weight: 700; color: var(--pine-deep); }
.work__meta { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

.thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.thumbs img {
  width: 86px; height: 86px;
  object-fit: cover;
  border: 1px solid var(--rule);
  padding: 2px;
  background: #fff;
}

.sub {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--pine-soft);
  padding: 9px 11px;
  margin-bottom: 8px;
  background: #FAFCFD;
}

.geo-status {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 7px;
  min-height: 16px;
}
.geo-status.is-bad { color: var(--late); font-weight: 700; }
.geo-status.is-ok  { color: #33501A; font-weight: 700; }

/* ---------------- selfie camera ---------------- */

.cam {
  border: 2px inset #C4CED6;
  padding: 10px;
  background: #F4F7F9;
}
.cam__video, .cam__shot {
  display: block;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #003A58;
  border: 1px solid var(--rule);
  padding: 2px;
  margin-bottom: 8px;
}
.cam__video { transform: scaleX(-1); }
.cam__bar { display: flex; gap: 6px; flex-wrap: wrap; }
.cam__fallback { margin-top: 9px; }
.cam__msg { margin-top: 7px; min-height: 16px; font-size: 11px; }
.cam__msg.is-ok  { color: #33501A; font-weight: 700; }
.cam__msg.is-bad { color: var(--late); font-weight: 700; }

.selfie-thumb img {
  width: 42px; height: 42px;
  object-fit: cover;
  border: 1px solid var(--rule);
  padding: 1px;
  background: #fff;
  display: block;
}

/* ---------------- voice recorder ---------------- */

.rec {
  border: 2px inset #C4CED6;
  padding: 10px;
  background: #F4F7F9;
}
.rec__bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rec__time { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.rec__play { width: 100%; margin-top: 9px; }
.rec__fallback { margin-top: 9px; }
.rec__msg { margin-top: 7px; min-height: 16px; font-size: 11px; }
.rec__msg.is-ok  { color: #33501A; font-weight: 700; }
.rec__msg.is-bad { color: var(--late); font-weight: 700; }

.rec.is-recording { border: 2px solid var(--late); background: #FBEFEE; }
.rec.is-recording .rec__time::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 6px;
  background: var(--late);
  animation: recpulse 1.1s steps(1, end) infinite;
}
@keyframes recpulse { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

/* ---------------- voice playback ---------------- */

.voice {
  border: 1px solid var(--vermilion);
  border-left: 5px solid var(--vermilion);
  background: #FDF6E4;
  padding: 9px 11px;
  margin: 0 0 12px;
}
.voice__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: #7A5406;
  margin-bottom: 6px;
}
.voice audio { width: 100%; }

/* ---------------- attached files ---------------- */

.files {
  border: 1px solid var(--rule);
  border-left: 5px solid var(--pine);
  background: #F3F7FA;
  padding: 8px 11px;
  margin: 0 0 12px;
}
.files__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--pine-deep);
  margin-bottom: 5px;
}
.files ul { margin: 0; padding-left: 18px; list-style: square; }
.files li { margin-bottom: 3px; font-size: 12px; }
.files a { font-weight: 700; }

/* inside a table cell it should read as a footnote, not a panel */
table.data .files {
  border: 0;
  border-left: 3px solid var(--pine-soft);
  background: transparent;
  padding: 3px 0 0 7px;
  margin: 5px 0 0;
}
table.data .files li { font-size: 11px; }

/* ---------------- page footer ---------------- */

.sitefoot {
  flex-shrink: 0;
  margin-top: auto;
  border-top: 3px solid var(--pine);
  background: #DDE6EC;
  color: var(--ink-soft);
  font-size: 11px;
  text-align: center;
  padding: 10px 14px;
}
.sitefoot strong { color: var(--pine-deep); }

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 13px; }
  .wrap { padding: 12px 10px 32px; }
  .topbar__inner { padding: 8px 10px; gap: 10px; }
  .brand { font-size: 14px; }
  .brand__logo { height: 30px; }
  .who { font-size: 10px; padding-left: 8px; }
  .nav__inner { padding: 0; }
  .nav a { padding: 7px 11px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  table.data { font-size: 11px; }
  table.data th, table.data td { padding: 5px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}