/* Agtrans Workshop Kiosk — M1 read-only board
   Design language mirrors fleet.agtrans.co.nz: teal accent, warm neutrals,
   generous tap targets (kiosk is a 65" wall touchscreen). */

:root {
  --bg:        #f7f6f2;
  --surface:   #ffffff;
  --ink:       #1e1b15;
  --ink-2:     #4d4a42;
  --muted:     #7a7974;
  --rule:      #d8d4cb;
  --accent:    #01696f;
  --accent-2:  #0c4e54;

  /* State palette (spec §3.1) */
  --s-grey:    #e6e3dc;
  --s-orange:  #f0a04e;
  --s-red:     #d85555;
  --s-blue:    #4a90a9;
  --s-yellow:  #edcb4c;
  --s-green:   #6fa66b;

  /* Priority dot */
  --p-routine: #6fa66b;
  --p-urgent:  #edb04c;
  --p-break:   #d85555;

  --tile-h: 156px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(30,27,21,.06), 0 6px 20px rgba(30,27,21,.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Top bar */
.top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
.top__brand { display: flex; align-items: center; gap: 14px; }
.top__logo {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 22px;
  display: grid; place-items: center;
}
.top__title { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.top__sub { color: var(--muted); font-size: 13px; }
.top__meta { text-align: right; }
.counts { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.freshness { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Board layout */
.board {
  padding: 20px 28px 40px;
  display: flex; flex-direction: column; gap: 28px;
}
.group__head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.group__name {
  font-weight: 600; font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.group__count {
  color: var(--muted); font-size: 13px;
}
.group__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* Tile */
.tile {
  position: relative;
  text-align: left; font: inherit; color: inherit;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  min-height: var(--tile-h);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
  overflow: hidden;
}
.tile:hover { border-color: #bfbcb2; }
.tile:active { transform: scale(.995); }
.tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tile__band {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--s-grey);
}
.tile--grey   .tile__band { background: var(--s-grey); }
.tile--orange .tile__band { background: var(--s-orange); }
.tile--red    .tile__band { background: var(--s-red); }
.tile--blue   .tile__band { background: var(--s-blue); }
.tile--yellow .tile__band { background: var(--s-yellow); }
.tile--green  .tile__band { background: var(--s-green); }

.tile__row { display: flex; align-items: center; gap: 10px; }
.tile__row--head { min-height: 22px; }
.tile__prio {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}
.tile--prio-routine .tile__prio { background: var(--p-routine); }
.tile--prio-urgent  .tile__prio { background: var(--p-urgent); }
.tile--prio-break   .tile__prio { background: var(--p-break); }

.tile__asset {
  font-weight: 600; font-size: 15px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile__desc {
  font-size: 15px; color: var(--ink-2);
  flex: 1 1 auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile__meta {
  font-size: 12px; color: var(--muted);
  justify-content: space-between;
}
.tile__due--overdue { color: var(--s-red); font-weight: 600; }
.tile__due--soon    { color: #b46915; font-weight: 600; }

.empty {
  padding: 60px 20px;
  text-align: center; color: var(--muted);
}

/* Overlay / sheet */
.overlay {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  z-index: 100;
}
.overlay[hidden] { display: none !important; }
.overlay__scrim {
  position: absolute; inset: 0;
  background: rgba(30, 27, 21, .38);
  backdrop-filter: blur(2px);
}
.sheet {
  position: relative;
  width: min(680px, 100%);
  max-height: 88vh;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(30,27,21,.25);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sheet__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 26px 12px;
  border-bottom: 1px solid var(--rule);
}
.sheet__eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent); font-weight: 600;
}
.sheet__title {
  margin: 4px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
}
.sheet__close {
  background: transparent; border: 0;
  font-size: 28px; line-height: 1;
  color: var(--muted); cursor: pointer;
  padding: 4px 10px; border-radius: 8px;
}
.sheet__close:hover { color: var(--ink); background: var(--bg); }

.sheet__body { padding: 18px 26px 26px; overflow-y: auto; }
.sheet__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px 24px; margin-bottom: 18px;
}
.sheet__grid > div { display: flex; flex-direction: column; }
.lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600;
}
.val { font-size: 15px; color: var(--ink); margin-top: 2px; }
.val--block { margin: 6px 0 0; color: var(--ink-2); white-space: pre-wrap; }

.sheet__section { margin-top: 14px; }
.others { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.others li {
  padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: 10px;
  display: flex; justify-content: space-between; gap: 10px;
  background: var(--bg);
  font-size: 14px;
}
.others__type { color: var(--muted); font-size: 12px; }

.link {
  display: inline-block;
  color: var(--accent); font-weight: 600; text-decoration: none;
  padding: 6px 0;
}
.link:hover { color: var(--accent-2); text-decoration: underline; }

.sheet__cta {
  margin-top: 22px; padding: 14px 16px;
  background: var(--bg); border-radius: 12px;
  border: 1px dashed var(--rule);
}
.sheet__cta-note { color: var(--muted); font-size: 13px; }

/* Kiosk display sizing — 65" screen at 1080p or 4K */
@media (min-width: 1600px) {
  body { font-size: 17px; }
  .tile { min-height: 180px; padding: 20px 22px; }
  .tile__asset { font-size: 17px; }
  .tile__desc { font-size: 16px; }
  .group__tiles { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
}

/* ---------- Passcode gate ---------- */
.lock-screen {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg);
  z-index: 200;
  padding: 24px;
}
.lock-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 40px rgba(30, 27, 21, .08);
}
.lock-logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.lock-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.lock-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 6px;
  text-align: center;
}
.lock-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 20px;
  font-family: inherit;
  text-align: center;
  letter-spacing: 0.4em;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease;
}
.lock-input:focus {
  border-color: var(--accent);
}
.lock-button {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.lock-button:hover { background: var(--accent-2); }
.lock-button:active { transform: translateY(1px); }
.lock-error {
  font-size: 14px;
  color: var(--s-red);
  margin: 4px 0 0;
  text-align: center;
}
.lock-note {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
  text-align: center;
}