/* ============================================================================
   Barmaso — the portal: sidebar, header, department pages
   ----------------------------------------------------------------------------
   After the Barmaso Internal Enterprise Portal design: a white sidebar with
   an emerald active item, a frosted header, a deep green banner with the
   brand yellow, and white cards. Written out here rather than taken from
   Tailwind's CDN, so the page keeps its shape on networks that block it.
   ============================================================================ */

:root {
  --pt-green: #10b981;
  --pt-green-600: #059669;
  --pt-green-700: #047857;
  --pt-green-50: #ecfdf5;
  --pt-hero-1: #065f46;
  --pt-hero-2: #022c22;
  --pt-yellow: #facc15;
  --pt-bg: #f8fafc;
  --pt-line: #e2e8f0;
  --pt-line-soft: #f1f5f9;
  --pt-slate: #475569;
  /* Secondary text. Was #94a3b8: 2.6:1 on white, under the 4.5:1 small text
     needs to be read; this is 4.8:1 and still plainly quieter than slate. */
  --pt-muted: #64748b;
  --pt-ink: #0f172a;
  --sidebar-w: 256px;
}

body { background: var(--pt-bg); }

/* --- Frame ------------------------------------------------------------------ */
.app-shell {
  display: flex;
  min-height: 100dvh;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* --- Sidebar ---------------------------------------------------------------- */
/* Nothing but the Exam page and Login is shown to someone signed out, so the
   sidebar only exists once somebody is. */
.sidebar {
  display: none;
  flex-direction: column;
  flex: none;
  width: var(--sidebar-w);
  height: 100dvh;
  position: sticky;
  top: 0;
  z-index: 50;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--pt-line);
}

body.is-signed-in .sidebar { display: flex; }

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--pt-line-soft);
}

.brand-mark {
  background: var(--pt-yellow);
  border-radius: 10px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--pt-muted);
}

.sidebar-close { display: none; }

.sidebar-nav { padding: 6px 0 12px; }

.sidebar-section-title {
  margin: 0;
  padding: 14px 22px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pt-muted);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 20px);
  margin: 2px 10px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--pt-slate);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-link:hover { background: var(--pt-line-soft); color: var(--pt-ink); }
.sidebar-link svg { flex: none; }

.sidebar-link.is-active {
  /* White on the brand's deeper green (5.5:1); the bright green was 2.5:1. */
  background: var(--pt-green-700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.3);
}

/* A page that belongs under the one above it (Sale Dashboard under the MD
   Dashboard): stepped in, on a guide line, and a size smaller. */
.sidebar-link--sub {
  position: relative;
  width: calc(100% - 44px);
  margin-left: 34px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 12.5px;
}
.sidebar-link--sub::before {
  content: '';
  position: absolute;
  left: -12px;
  top: -4px;
  bottom: 50%;
  width: 10px;
  border-left: 1.5px solid var(--pt-line);
  border-bottom: 1.5px solid var(--pt-line);
  border-bottom-left-radius: 8px;
}

.sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--pt-line-soft);
}

.sidebar-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--pt-green-50);
  color: var(--pt-green-700);
  font-size: 13px;
  font-weight: 700;
}

.sidebar-user-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.sidebar-user-name,
.sidebar-user-role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-name { font-size: 13px; font-weight: 700; color: var(--pt-ink); }
.sidebar-user-role { font-size: 12px; color: var(--pt-muted); }

.sidebar-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40px: a thumb on a phone, not a mouse pointer. */
  min-width: 40px;
  min-height: 40px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pt-muted);
  cursor: pointer;
}

/* The key beside it is not a danger, so it does not go red. */
a.sidebar-logout:hover { background: var(--pt-hover, #f1f5f9); color: var(--pt-ink); }

/* The session is about to end, or has. Pinned to the top of every page. */
.session-strip {
  position: sticky;
  top: 0;
  z-index: 60;
  margin: 0;
  padding: 10px 16px;
  background: #fef3c7;
  color: #78350f;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

button.sidebar-logout:hover { background: #fff1f2; color: #e11d48; }

/* --- Header ----------------------------------------------------------------- */
.site-header {
  z-index: 30;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pt-line);
}

.menu-btn { display: none; }

.header-brand { display: flex; }
body.is-signed-in .header-brand { display: none; }

.header-crumb {
  display: none;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-slate);
}

body.is-signed-in .header-crumb { display: block; }
.header-crumb b { color: var(--pt-green-600); }
.header-crumb a { color: inherit; text-decoration: none; }
.header-crumb a:hover { color: var(--pt-green-600); text-decoration: underline; }

.header-slot:empty { display: none; }

.header-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-icon-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #64748b;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.header-icon-link:hover { background: var(--pt-line-soft); color: var(--pt-green-600); }

.header-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pt-green-600);
  border-color: var(--pt-green-600);
}

.header-login:hover { background: var(--pt-green-700); border-color: var(--pt-green-700); }

/* --- Phone and tablet: the sidebar slides in ------------------------------- */
@media (max-width: 1023px) {
  body.is-signed-in .menu-btn { display: grid; }
  body.is-signed-in .header-brand { display: flex; }
  body.is-signed-in .header-crumb { display: none; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(var(--sidebar-w), 86vw);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }

  /* The shadow belongs to the open drawer: a closed one's would lie along the edge of the page. */
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-close { display: grid; place-items: center; }
}

/* --- Department pages ------------------------------------------------------- */
/* A banner that says where you are, not one that fills the screen: the
   modules are what someone came for, and they start near the top. */
.portal-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pt-hero-1), var(--pt-hero-2));
  color: #fff;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.portal-hero-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(250, 204, 21, 0.15);
  color: var(--pt-yellow);
}

.portal-hero-text { min-width: 0; }

.portal-kicker {
  display: inline-block;
  margin: 0 0 4px;
  padding: 1px 8px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.portal-hero-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  overflow-wrap: anywhere;
}

.portal-hero-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: #d1fae5;
}

.portal-section-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pt-ink);
}

/* Modules as rows: icon, name and a line, the arrow at the end. */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 10px;
}

.module-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 1px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--pt-line);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.module-card:hover {
  border-color: #a7f3d0;
  box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.3);
}

.module-card-icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--pt-green-50);
  color: var(--pt-green-600);
}

.module-card-title,
.module-card-desc,
.module-card-count { grid-column: 2; min-width: 0; }

.module-card-title { font-size: 14px; font-weight: 700; color: var(--pt-ink); }
.module-card-desc { font-size: 12px; line-height: 1.45; color: #64748b; }
.module-card-count { font-size: 12px; font-weight: 700; color: var(--pt-muted); }

/* The word goes; the arrow stays as the sign that the row opens. */
.module-card-go {
  grid-column: 3;
  grid-row: 1 / span 3;
  display: grid;
  font-size: 0;
  color: var(--pt-muted);
}

.module-card:hover .module-card-go { color: var(--pt-green-600); }

.portal-empty {
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--pt-line);
  border-radius: 20px;
  background: #fff;
  color: #64748b;
  text-align: center;
}

.portal-login {
  max-width: 460px;
  margin: 24px auto;
}

/* Already on Login: the header button would only lead back here. */
body[data-route="login"] .header-login { display: none; }

/* --- Phone ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .portal-hero { padding: 14px 16px; margin-bottom: 14px; }
  .portal-hero-icon { width: 38px; height: 38px; }
  .portal-hero-title { font-size: 18px; }
  .portal-hero-sub { font-size: 12px; }
}

/* --- Sidebar collapsed to its icons (wide screens) ------------------------- */
.sidebar-collapse {
  display: none;
  align-items: center;
  gap: 12px;
  width: calc(100% - 20px);
  margin: 0 10px 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pt-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sidebar-collapse:hover { background: var(--pt-line-soft); color: var(--pt-ink); }

/* Collapsed, the sidebar is a strip of icons that opens over the page while
   the pointer is on it (or the keyboard has moved into it), and closes when it
   leaves. The short delay before opening keeps a mouse on its way somewhere
   else from flicking it open. The button pins it open instead. */
@media (min-width: 1024px) {
  .sidebar-collapse { display: flex; margin-top: auto; }
  .sidebar-collapse + .sidebar-user { margin-top: 0; }

  .sidebar-link span,
  .brand-text,
  .sidebar-collapse span { white-space: nowrap; }

  body.sidebar-collapsed .app-main { margin-left: 72px; }

  body.sidebar-collapsed .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 72px;
    overflow-x: hidden;
    transition: width 0.18s ease 0.12s, box-shadow 0.18s ease 0.12s;
  }

  body.sidebar-collapsed .sidebar:hover,
  body.sidebar-collapsed .sidebar:has(:focus-visible) {
    width: 256px;
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.25);
  }

  body.sidebar-collapsed .sidebar:not(:hover):not(:has(:focus-visible)) .brand-text,
  body.sidebar-collapsed .sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-link span,
  body.sidebar-collapsed .sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-collapse span,
  body.sidebar-collapsed .sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-user-text,
  body.sidebar-collapsed .sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-logout { display: none; }

  /* Folded to icons, a sub-page lines up with the others. */
  body.sidebar-collapsed .sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-link--sub { width: calc(100% - 20px); margin-left: 10px; }
  body.sidebar-collapsed .sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-link--sub::before { display: none; }

  /* A section's name gives way to a thin line between the groups. */
  body.sidebar-collapsed .sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-section-title {
    height: 1px;
    margin: 10px 18px;
    padding: 0;
    overflow: hidden;
    background: var(--pt-line-soft);
    color: transparent;
  }

  body.sidebar-collapsed .sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-brand { padding: 16px 18px; }
  body.sidebar-collapsed .sidebar:not(:hover):not(:has(:focus-visible)) .sidebar-user { padding: 12px 18px; }
}

/* --- Settings pages --------------------------------------------------------- */
.settings-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.settings-head-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--pt-green-50);
  color: var(--pt-green-600);
}

.settings-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--pt-ink); }

.settings-body {
  padding: 18px;
  border: 1px solid var(--pt-line);
  border-radius: 16px;
  background: #fff;
}

.settings-depts .portal-section-title { margin-top: 18px; }

.settings-table-wrap { overflow-x: auto; }

.settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.settings-table th,
.settings-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--pt-line-soft);
  text-align: left;
  vertical-align: middle;
}

.settings-table th { font-size: 12px; font-weight: 700; color: var(--pt-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.settings-dept { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

.settings-chip {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pt-green-50);
  color: var(--pt-green-700);
  font-size: 12px;
  font-weight: 600;
}

.settings-muted { color: var(--pt-muted); }

/* --- Dashboard banner ------------------------------------------------------ */
.portal-hero--dash {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: 32px 36px;
  background: linear-gradient(115deg, #0b1324 0%, #03261c 45%, #052e22 65%, #0f172a 100%);
}

.portal-hero--dash .portal-hero-text { position: relative; z-index: 1; }
.portal-hero--dash .portal-kicker { margin-bottom: 12px; padding: 4px 12px; font-size: 12px; }
.portal-hero--dash .portal-hero-title { font-size: clamp(24px, 3.6vw, 40px); }

/* The brand, set large and faint behind the words. */
.portal-watermark {
  position: absolute;
  right: -2%;
  bottom: -0.3em;
  font-size: clamp(90px, 13vw, 190px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 640px) {
  .portal-hero--dash { min-height: 0; padding: 22px 18px; }
  .portal-hero--dash .portal-kicker { font-size: 12px; }
}

/* --- Announcement strip ---------------------------------------------------- */
.announce-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 20px;
  background: #1f5c4a;
  color: #e2f5ee;
  font-size: 13px;
}

.announce-bar[hidden] { display: none; }

.announce-badge {
  flex: none;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--pt-yellow);
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.announce-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.announce-scroll {
  display: flex;
  width: max-content;
  animation: announce-run 40s linear infinite;
}

.announce-track:hover .announce-scroll { animation-play-state: paused; }

.announce-line { display: flex; flex: none; }

.announce-track--empty {
  -webkit-mask-image: none;
  mask-image: none;
  color: rgba(226, 245, 238, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announce-item {
  padding-right: 48px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.announce-item:hover { text-decoration: underline; }
.announce-item-title { font-weight: 700; color: #fff; }
.announce-item::before { content: '•'; margin-right: 10px; color: var(--pt-yellow); }

.announce-read {
  flex: none;
  color: var(--pt-yellow);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.announce-read:hover { text-decoration: underline; }

@keyframes announce-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Someone who has asked for less motion gets the first titles, still. */
@media (prefers-reduced-motion: reduce) {
  .announce-scroll { animation: none; }
}

@media (max-width: 640px) {
  .announce-bar { gap: 10px; padding: 7px 12px; font-size: 12px; }
  .announce-badge { font-size: 12px; padding: 2px 7px; }
}

/* --- Role tiles and a role's box ------------------------------------------ */
.role-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.role-tile {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 1px;
  padding: 12px 14px;
  border: 1px solid var(--pt-line);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.role-tile:hover { border-color: #a7f3d0; box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.3); }
.role-tile--admin { cursor: default; background: var(--pt-bg); }
.role-tile--admin:hover { border-color: var(--pt-line); box-shadow: none; }

.role-tile-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--pt-green-50);
  color: var(--pt-green-600);
}

.role-tile-name { font-size: 14px; font-weight: 700; color: var(--pt-ink); overflow-wrap: anywhere; }
.role-tile-sub { font-size: 12px; color: var(--pt-muted); }

.role-seed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }

.role-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.45);
}

.role-dialog[open] { display: flex; flex-direction: column; }
.role-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }

.role-dialog-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--pt-line-soft);
}

.role-dialog-head .role-tile-icon { grid-row: auto; }
.role-dialog-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.role-dialog-title h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--pt-ink); }

.role-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}

.role-dialog .form-error { margin: 0 18px 8px; }

.role-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--pt-line-soft);
}

.role-dialog-actions { display: flex; gap: 8px; }

/* --- Announcement cards and the post view ---------------------------------- */
.ann-content--preview { margin-bottom: 0; }
.ann-more { font-weight: 700; color: var(--pt-green-600); text-decoration: none; white-space: nowrap; }

.ann-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.post-page { max-width: 680px; margin: 0 auto; }

.post-back {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-slate);
  text-decoration: none;
}

.post-back:hover { color: var(--pt-green-600); }

.post-card {
  padding: 16px 18px 12px;
  border: 1px solid var(--pt-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.post-head-text { display: flex; flex-direction: column; min-width: 0; }
.post-author { font-size: 14px; font-weight: 700; color: var(--pt-ink); }
.post-when { font-size: 12px; color: var(--pt-muted); }

.post-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pt-green-50);
  color: var(--pt-green-700);
  font-size: 12px;
  font-weight: 800;
}

.post-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--pt-ink); }

.post-text {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: #1e293b;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* One picture full width; more, in a grid like a feed. */
.post-images {
  display: grid;
  gap: 4px;
  margin: 0 -18px 12px;
  overflow: hidden;
}

.post-images--2 { grid-template-columns: 1fr 1fr; }
.post-images--3, .post-images--4 { grid-template-columns: 1fr 1fr; }
.post-images--3 > :first-child { grid-column: 1 / -1; }

.post-photo {
  display: block;
  padding: 0;
  border: 0;
  background: var(--pt-line-soft);
  cursor: zoom-in;
}

.post-photo.is-loading { min-height: 200px; }

.post-images img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  background: var(--pt-line-soft);
}

.post-images--2 img, .post-images--3 img, .post-images--4 img { height: 240px; }
.post-images--3 > :first-child img { height: 300px; }

.post-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
  padding: 4px 0 8px;
  font-size: 13px;
  color: var(--pt-muted);
}

.post-stat-emoji { letter-spacing: -2px; }

.post-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px 0;
  border-top: 1px solid var(--pt-line-soft);
  border-bottom: 1px solid var(--pt-line-soft);
}

.post-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pt-slate);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.post-action:hover { background: var(--pt-line-soft); }
.post-action-emoji { font-size: 17px; line-height: 1; }
.post-action--like.is-on { color: #2563eb; }
.post-action--like.is-love, .post-action--like.is-care { color: #e11d48; }
.post-action--like.is-haha, .post-action--like.is-wow, .post-action--like.is-sad { color: #d97706; }

.post-like-wrap { position: relative; }

.post-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 5;
  display: flex;
  gap: 2px;
  padding: 5px 6px;
  border: 1px solid var(--pt-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.35);
  animation: picker-in 0.14s ease-out;
}

.post-picker[hidden] { display: none; }

.post-pick {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.post-pick:hover { transform: scale(1.3) translateY(-3px); }
.post-pick.is-picked { background: var(--pt-green-50); }

@keyframes picker-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.post-comments { display: grid; gap: 10px; padding: 12px 0 6px; }
.post-no-comments { margin: 0; font-size: 13px; color: var(--pt-muted); }

.post-comment { display: flex; gap: 8px; align-items: flex-start; }
.post-comment .post-avatar { width: 32px; height: 32px; font-size: 12px; }
.post-comment-body { min-width: 0; }

.post-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--pt-line-soft);
}

.post-bubble-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--pt-ink); }

.post-bubble-text {
  margin: 1px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #1e293b;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.post-comment-meta { display: flex; gap: 10px; padding: 2px 12px 0; font-size: 12px; color: var(--pt-muted); }

.post-comment-delete {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pt-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.post-comment-delete:hover { color: #e11d48; }

.post-comment-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-top: 8px;
}

.post-comment-form .post-avatar { width: 32px; height: 32px; font-size: 12px; }

.post-comment-input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid var(--pt-line);
  border-radius: 20px;
  background: var(--pt-bg);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
}

.post-comment-input:focus { outline: none; border-color: var(--pt-green); background: #fff; }

@media (max-width: 640px) {
  .post-card { padding: 14px 14px 10px; border-radius: 14px; }
  .post-images { margin: 0 -14px 12px; }
  .post-pick { width: 36px; height: 36px; font-size: 23px; }
}

/* Cards in the list, laid out like the post they open. */
.ann-card .ann-card-head { align-items: flex-start; }
.ann-card .post-head { margin-bottom: 0; }
.ann-title-link { color: inherit; text-decoration: none; }
.ann-title-link:hover .ann-title { color: var(--pt-green-700); }
.ann-card .ann-title { margin: 10px 0 4px; }

.ann-thumb {
  position: relative;
  display: block;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--pt-line-soft);
}

.ann-thumb img { display: block; width: 100%; max-height: 260px; object-fit: cover; }

.ann-thumb-more {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.announce-when { color: rgba(226, 245, 238, 0.65); font-size: 0.92em; }

/* --- Files on a post, and a photo shown large ------------------------------ */
.post-files { display: grid; gap: 8px; margin-bottom: 12px; }

.post-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  background: var(--pt-bg);
}

.post-file-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 46px;
  border-radius: 8px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 800;
}

.post-file-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.post-file-name { font-size: 14px; font-weight: 700; color: var(--pt-ink); overflow-wrap: anywhere; }
.post-file-size, .post-file-note { font-size: 12px; color: var(--pt-muted); }
.post-file-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }

.photo-box {
  max-width: 100vw;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
}

.photo-box::backdrop { background: rgba(0, 0, 0, 0.85); }
.photo-box img { display: block; max-width: 96vw; max-height: 92dvh; object-fit: contain; }

.photo-box-close {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

/* --- The announcement form's files ----------------------------------------- */
.ann-files { display: grid; gap: 6px; margin: 6px 0 8px; }

.ann-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--pt-line);
  border-radius: 10px;
  background: #fff;
}

.ann-file-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.ann-file-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; font-size: 20px; }
.ann-file-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ann-file-size { flex: none; font-size: 12px; color: var(--pt-muted); }
.editor-card .form-error { white-space: pre-line; }

/* --- Sale Target ------------------------------------------------------------ */
.tgt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 10px;
}

.tgt-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tgt-period .field-input { width: auto; }
.tgt-days { font-size: 12px; color: var(--pt-muted); }
.tgt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* A strip of one tab is nothing to choose from (Way Check, Stock, Report). */
.tab-strip--single { display: none; }

/* Target Calculate's buttons, in two labelled rows: bring in, take out. */
.tgt-toolbar--grouped .tgt-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tgt-period-day { display: inline-flex; align-items: center; gap: 8px; }
.tgt-toolbar--grouped .tgt-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.tgt-btn-group { display: grid; gap: 4px; }
.tgt-btn-group-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint, #8a94a6); }
.tgt-btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tgt-search { width: 180px; }

.tgt-table .tgt-amount { width: 150px; text-align: right; font-variant-numeric: tabular-nums; }
/* The Shop heading is the sort control: looks like a heading, works like a button. */
.tgt-sort {
  padding: 6px 0;
  min-height: 32px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.tgt-sort:hover { text-decoration: underline; }

/* --- Wholesale › Stock -----------------------------------------------------
   One surface, a dense list, the quantity as the loudest thing on each row.
   Colour carries state only alongside a word and a dot, never alone. */
.whs {
  --whs-in: #0E7A55;
  --whs-in-soft: #E3F4EC;
  --whs-out: var(--danger);
  --whs-out-soft: var(--danger-soft);
  --whs-none: var(--ink-faint);
  --whs-none-soft: var(--surface-alt);
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.whs-head { display: grid; gap: 4px; }
.whs-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.whs-title { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.whs-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-soft); }
.whs-meta-item { white-space: nowrap; }

.whs-banner {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.45;
}
.whs-banner svg { flex-shrink: 0; }
.whs-banner.is-offline { background: var(--surface-alt); color: var(--ink); }
.whs-banner.is-stale { background: var(--warning-soft); color: var(--warning); }
.whs-banner.is-ok { background: var(--whs-in-soft); color: var(--whs-in); }

/* The search bar stays on screen while the list scrolls. */
.whs-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 8px; align-items: stretch;
  padding: 8px 0; margin: -8px 0 0;
  background: var(--bg);
}
.whs-search {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  height: 52px; padding: 0 6px 0 14px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.whs-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.whs-search-icon { display: inline-flex; color: var(--ink-faint); }
.whs-input {
  flex: 1; min-width: 0; height: 100%; padding: 0 10px;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink);
}
.whs-input::-webkit-search-cancel-button { display: none; }
.whs-input::placeholder { color: var(--ink-faint); }
.whs-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.whs-icon-btn:hover { background: var(--surface-alt); color: var(--ink); }
.whs-scan {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 52px; height: 52px; padding: 0 16px;
  border: 0; border-radius: var(--radius-md);
  background: var(--action); color: var(--action-ink);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}
.whs-scan:hover { background: var(--action-hover); }
.whs-scan:active { transform: scale(.97); }

.whs-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.whs-filters::-webkit-scrollbar { display: none; }
.whs-filters:empty { display: none; }
.whs-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.whs-chip:hover { border-color: var(--ink-faint); }
.whs-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.whs-chip-n { font-size: 12px; opacity: .75; }
.whs-chip-sep { flex-shrink: 0; width: 1px; background: var(--border); margin: 6px 2px; }

.whs-results { display: grid; gap: 8px; }
.whs-count { margin: 0; font-size: 13px; color: var(--ink-soft); }
.whs-list-head { display: none; }
.whs-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
}
.whs-item + .whs-item { border-top: 1px solid var(--border); }

/* A row: the name and code on the left, the number on the right. */
.whs-row {
  width: 100%; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  grid-template-areas: 'name qty chev' 'sub qty chev';
  column-gap: 12px; row-gap: 3px;
  min-height: 64px; padding: 10px 12px 10px 14px;
  border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: background .12s ease;
}
.whs-row:hover { background: var(--surface-alt); }
.whs-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.whs-name {
  /* The whole description, always: two phone models can differ only in the
     last word ("Pro" / "Pro Max"), and cutting it off makes them look alike. */
  grid-area: name; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--ink);
  overflow-wrap: anywhere;
}
/* The typed words, marked by colour and weight only: no box to crowd the
   line, and no underline for the Myanmar font's low baseline to misplace. */
.whs-name mark, .whs-code mark { background: none; color: var(--accent-deep); font-weight: 800; padding: 0; }
.whs-sub { grid-area: sub; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.whs-code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); letter-spacing: .01em; }
.whs-tag {
  font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 7px; border-radius: 6px;
  background: var(--surface-alt); color: var(--ink-soft);
}
.whs-tag.is-main { background: var(--accent-soft); color: var(--accent-deep); }
.whs-qty { grid-area: qty; display: grid; justify-items: end; gap: 2px; min-width: 76px; }
.whs-qty-n { font-size: 22px; line-height: 1.1; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.whs-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.whs-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.whs-item.is-in .whs-state { color: var(--whs-in); }
.whs-item.is-out .whs-state { color: var(--whs-out); }
.whs-item.is-out .whs-qty-n { color: var(--whs-out); }
.whs-item.is-none .whs-state, .whs-item.is-none .whs-qty-n { color: var(--whs-none); }
.whs-chev { grid-area: chev; display: inline-flex; color: var(--ink-faint); transition: transform .15s ease; }
.whs-item.is-open .whs-chev { transform: rotate(90deg); }
.whs-item.is-open .whs-row { background: var(--surface-alt); }

.whs-detail { display: grid; gap: 10px; padding: 4px 14px 14px; background: var(--surface-alt); }
.whs-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.whs-note.is-warn { color: var(--warning); }
.whs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0; }
.whs-fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
.whs-fact dt { font-size: 12px; color: var(--ink-soft); }
.whs-fact dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.whs-members summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink); min-height: 32px; display: flex; align-items: center; }
.whs-members ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.whs-members li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.whs-copy { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.whs-more { justify-self: center; }

/* Before a search, when nothing is found, and when something went wrong. */
.whs-start, .whs-state-box {
  display: grid; gap: 8px; padding: 22px 18px;
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-md);
}
.whs-state-box { justify-items: center; text-align: center; padding: 32px 18px; }
.whs-state-icon { color: var(--ink-faint); }
.whs-state-title, .whs-start-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.whs-state-sub { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.whs-tips { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-soft); }
.whs-recent { display: grid; gap: 6px; margin-top: 6px; }
.whs-recent-title { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-transform: none; }

.whs-skel { cursor: default; }
.whs-skel-line { grid-area: name; height: 12px; width: 55%; border-radius: 6px; background: var(--surface-alt); }
.whs-skel-line.is-wide { width: 80%; }
.whs-skel-line:not(.is-wide) { grid-area: sub; }
.whs-skel-n { grid-area: qty; width: 48px; height: 22px; border-radius: 6px; background: var(--surface-alt); }
.whs-list.is-loading .whs-skel > span { animation: whs-pulse 1.2s ease-in-out infinite; }
@keyframes whs-pulse { 50% { opacity: .45; } }

/* Laptop and up: column headings, the code in its own column, more rows. */
@media (min-width: 860px) {
  .whs-list-head {
    display: grid; grid-template-columns: minmax(0, 1fr) 210px 110px 18px; column-gap: 12px;
    padding: 0 12px 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft);
  }
  .whs-list-head .is-num { text-align: right; }
  .whs-row {
    grid-template-columns: minmax(0, 1fr) 210px 110px 18px;
    grid-template-areas: 'name sub qty chev';
    min-height: 56px;
  }
  .whs-name { font-size: 14.5px; }
  .whs-scan-label { display: inline; }
}
/* Phones: the same hierarchy, one size smaller, so a row is a glance and
   not a paragraph. The search text stays at 16px — below that, iPhone zooms
   the page when the box is tapped. */
@media (max-width: 640px) {
  .whs { gap: 10px; }
  .whs-title { font-size: 18px; }
  .whs-meta { font-size: 12px; }
  .whs-search { height: 48px; }
  .whs-scan { height: 48px; min-width: 48px; }
  .whs-chip { min-height: 34px; font-size: 12.5px; padding: 0 10px; }
  .whs-row { min-height: 56px; padding: 9px 10px 9px 12px; column-gap: 10px; }
  .whs-name { font-size: 13.5px; line-height: 1.45; font-weight: 600; }
  .whs-code { font-size: 12px; }
  .whs-tag { font-size: 12px; padding: 3px 6px; }
  .whs-qty { min-width: 58px; }
  .whs-qty-n { font-size: 18px; }
  .whs-state { font-size: 12px; }
  .whs-banner, .whs-note, .whs-state-sub, .whs-tips { font-size: 13px; }
  .whs-fact dd { font-size: 15px; }
}
@media (max-width: 420px) {
  .whs-scan { padding: 0 12px; }
  .whs-scan-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .whs * { transition: none !important; animation: none !important; }
}

.tgt-table .tgt-group { font-weight: 800; color: var(--pt-green-700); text-align: center; }
.tgt-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-right: 8px;
  border-radius: 6px; background: var(--pt-green-50, #ecfdf5); color: var(--pt-green-700); font-size: 12px; font-weight: 800;
  vertical-align: 1px;
}
.tgt-save { position: sticky; bottom: 0; z-index: 2; padding: 10px 0; background: var(--pt-bg); align-items: center; }
.tgt-save .form-note { margin: 0; }

.fin-table tr.tgt-total td { background: #fff7c2; font-weight: 800; }

/* The report, as the office's sheet has it. */
.tgt-report th { background: #ffeb3b; color: #111827; font-weight: 800; text-align: center; }
.tgt-report td { white-space: nowrap; }
.tgt-report .tgt-group-cell { text-align: center; vertical-align: middle; font-weight: 800; border-right: 1px solid var(--pt-line); }
.tgt-report .tgt-pct { text-align: center; }
.tgt-report .tgt-pct.is-behind { color: #dc2626; font-weight: 700; }

.tgt-groups-card,
.tgt-summary {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--pt-line);
  border-radius: 14px;
  background: #fff;
}

.tgt-group-row {
  display: grid;
  grid-template-columns: minmax(70px, 110px) minmax(90px, 1fr) minmax(90px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.tgt-group-head { font-size: 12px; font-weight: 700; color: var(--pt-muted); }

.tgt-unmatched {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding: 12px;
  border: 1px solid #fde68a;
  border-radius: 12px;
  background: #fffbeb;
}

.tgt-unmatched-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.tgt-unmatched .btn { justify-self: start; }
.form-note { white-space: pre-line; }

@media (max-width: 640px) {
  .tgt-group-row { grid-template-columns: 1fr 1fr; }
  .tgt-table .tgt-amount { width: 120px; }
}

.field-input--sm { min-height: 34px; padding: 6px 10px; font-size: 13px; }
@media (max-width: 720px) { .field-input--sm { font-size: 16px; min-height: 40px; } }

.role-dept-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px 0; }
.role-dept-row .field-input { width: auto; min-width: 220px; }
.role-dept-row .field-hint { flex-basis: 100%; margin: 0; }
.role-dialog .role-drop-note { margin: 0 18px 8px; }
.settings-ticks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.settings-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* --- Set Up For Stock -------------------------------------------------------- */
.stock-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }
.stock-search { flex: 1 1 280px; max-width: 460px; }
.stock-pager { display: flex; align-items: center; gap: 8px; }
.stock-page-label { font-size: 12.5px; color: var(--pt-slate); white-space: nowrap; }
.stock-table td { vertical-align: top; }

/* --- Shop Check ---------------------------------------------------------------- */
.check-form { display: grid; gap: 14px; }

.check-top {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  padding: 12px 14px;
  border: 1px solid var(--pt-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px -12px rgba(15, 23, 42, 0.35);
}

.check-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.check-fields .field { margin: 0; }

.check-score { display: flex; align-items: center; gap: 12px; }
.check-score-big {
  min-width: 86px;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  background: var(--pt-line-soft);
  color: var(--pt-slate);
}
.check-score-text { display: flex; flex-direction: column; font-size: 12px; color: var(--pt-slate); }
.check-score-line { font-weight: 700; color: var(--pt-ink); font-size: 13px; }
.check-score-sub { color: var(--pt-muted); }

.is-excellent { background: #dcfce7; color: #15803d; }
.is-good { background: #e0f2fe; color: #0369a1; }
.is-fair { background: #fef3c7; color: #b45309; }
.is-poor { background: #fee2e2; color: #b91c1c; }

.check-cat {
  padding: 14px;
  border: 1px solid var(--pt-line);
  border-radius: 16px;
  background: #fff;
}

.check-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.check-cat-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--pt-ink); }
.check-cat-head .field-input { flex: 1; }
.check-cat-sub { font-weight: 800; color: var(--pt-green-700); white-space: nowrap; }

.check-point { padding: 12px 0; border-top: 1px solid var(--pt-line-soft); display: grid; gap: 8px; }
.check-point:first-of-type { border-top: 0; }
.check-point.is-missing { margin: 0 -8px; padding: 12px 8px; border-radius: 10px; background: #fff1f2; }
.check-point-head { display: flex; gap: 10px; align-items: baseline; }
.check-point-no {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pt-line-soft); font-size: 12px; font-weight: 800; color: var(--pt-slate);
}
.check-point-text { font-size: 14px; font-weight: 600; color: var(--pt-ink); }

.check-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.check-pill {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 4px;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  background: #fff;
  color: var(--pt-slate);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.check-pill b { font-size: 16px; }
.check-pill-label { font-size: 12px; }
.check-pill:hover { border-color: #a7f3d0; }
.check-pill.is-picked { background: var(--pt-green-700); border-color: var(--pt-green-700); color: #fff; }
.check-scale .check-pill.is-picked:nth-child(1),
.check-scale .check-pill.is-picked:nth-child(2) { background: #ef4444; border-color: #ef4444; }
.check-scale .check-pill.is-picked:nth-child(3) { background: #f59e0b; border-color: #f59e0b; }

.check-remark { min-height: 38px; resize: vertical; }
.check-remark.is-required { border-color: #fca5a5; }
.check-point.is-missing .check-remark.is-required { border-color: #ef4444; }

.check-save { position: sticky; bottom: 0; z-index: 2; padding: 10px 0; background: var(--pt-bg); align-items: center; }
.check-save .form-note { margin: 0; }
@media (max-width: 720px) {
  .check-save { flex-wrap: wrap; gap: 6px; }
  .check-save .btn { flex: 1 1 100%; min-height: 48px; }
  .check-save .form-note { flex: 1 1 100%; order: -1; }
  .check-save .form-note:empty { display: none; }
}

.check-list .check-row { cursor: pointer; }
.check-list .check-row:hover td { background: var(--pt-green-50); }
.check-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-weight: 800; font-size: 12.5px; }
.check-badge--big { font-size: 20px; padding: 6px 14px; }

.check-detail {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--pt-line);
  border-radius: 16px;
  background: #fff;
}
.check-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.check-detail-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.check-table .check-cat-cell { vertical-align: middle; font-weight: 700; background: var(--pt-bg); }
.check-table .check-score-cell { font-weight: 800; }
.check-table .is-s1, .check-table .is-s2 { color: #dc2626; }
.check-table .is-s3 { color: #d97706; }
.check-comment { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--pt-bg); white-space: pre-wrap; }
.check-setup-list { display: grid; gap: 12px; margin: 12px 0; }

@media (max-width: 640px) {
  .check-top { grid-template-columns: 1fr; position: static; }
  .check-fields { grid-template-columns: 1fr; }
  .check-pill-label { display: none; }
  .check-pill { padding: 10px 4px; }
}

.tgt-lark-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.tgt-lark-row .field-input { flex: 1 1 320px; }

/* Opening days: a shop, a day, what the day counts up to, and a way to take it off. */
.tgt-open-card { margin-top: 16px; }
.tgt-open-rows { display: grid; gap: 8px; margin: 8px 0; }
.tgt-open-row { display: grid; grid-template-columns: minmax(180px, 320px) 170px 1fr auto; gap: 8px; align-items: center; }
.tgt-open-row .field-input, .tgt-open-row .btn { min-height: 44px; }
.tgt-open-cap { font-size: 13px; color: var(--text-muted, #667085); }
@media (max-width: 700px) {
  .tgt-open-row { grid-template-columns: 1fr auto; grid-template-areas: "shop shop" "date del" "cap cap"; padding-bottom: 8px; border-bottom: 1px solid var(--border, #e2e5ea); }
  .tgt-open-shop { grid-area: shop; }
  .tgt-open-date { grid-area: date; }
  .tgt-open-cap { grid-area: cap; }
  .tgt-open-row > .btn { grid-area: del; min-width: 44px; }
}

.lark-groups { display: grid; gap: 8px; margin: 8px 0; }
.lark-group-row { display: grid; grid-template-columns: auto minmax(120px, 200px) 1fr auto; gap: 8px; align-items: center; }
.lark-group-on { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
@media (max-width: 860px) { .lark-group-row { grid-template-columns: 1fr auto; } .lark-group-row .field-input { grid-column: 1 / -1; } }

.lark-group-view { max-width: 220px; }

/* The daily send: a tick and an hour, big enough for a thumb. */
.lark-auto { border: 1px solid var(--border, #e2e5ea); border-radius: 12px; padding: 12px 14px; margin: 12px 0; display: grid; gap: 8px; min-width: 0; }
.lark-auto-title { font-weight: 600; font-size: 14px; padding: 0 4px; }
.lark-auto-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.lark-auto-row .btn { min-height: 44px; }
.lark-auto-at { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.lark-auto-at span { white-space: nowrap; }
.lark-auto-time { min-height: 44px; min-width: 120px; }
.lark-auto .lark-group-on { min-height: 44px; white-space: normal; }
.lark-auto .lark-group-on input { width: 20px; height: 20px; flex: none; }
@media (min-width: 861px) { .lark-group-row { grid-template-columns: auto minmax(110px, 170px) 1fr minmax(150px, 200px) auto; } }

/* --- Stock Count ---------------------------------------------------------
   Built for a phone held in one hand in a shop: the code box is big enough
   to hit without looking, the number box sits under the item it belongs to,
   and the last few scans stay on screen so a mis-scan is caught at once. */
.count-name { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--pt-ink); }
.count-pick { margin-bottom: 8px; }

/* ===========================================================================
   Stock Check.

   One column, one question at a time, built for a thumb and a shelf. The
   figures the office holds are not here and never were; what is here is
   where you are, what you scanned, how many there were, and what you have
   counted so far.
   =========================================================================== */

.count-page { display: grid; gap: 14px; }
.count-page > * { min-width: 0; }

/* --- where you are -------------------------------------------------------- */

.count-head {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--pt-line);
  border-radius: 16px;
  background: linear-gradient(140deg, #0f5132 0%, #157347 100%);
  color: #fff;
}
.count-head-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.count-head-shop {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
}
.count-head-day { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.82); }

/* How far along, as a bar rather than a fraction nobody stops to divide. */
.count-meter {
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
}
.count-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: #ffe066;
  transition: width 260ms ease;
}
.count-head-count {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.count-which { margin: 0; }

/* --- the one thing to do next --------------------------------------------- */

.count-scan { display: grid; gap: 10px; }

/* Big enough to hit while holding a box in the other hand. */
.count-scan-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
}
.count-scan-mark { font-size: 20px; line-height: 1; }

.count-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pt-muted);
  font-size: 12px;
}
.count-or::before,
.count-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pt-line);
}

.count-type { display: flex; gap: 8px; }
.count-code {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 17px;
  letter-spacing: 0.04em;
  min-height: 48px;
}
.count-type-go { flex: none; min-height: 48px; white-space: nowrap; }
/* The hint is words, not a code: it reads in the body face. */
.count-code::placeholder { font-family: var(--font-body); font-size: 14.5px; letter-spacing: 0; }

/* --- the product, and how many -------------------------------------------- */

.count-card {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--pt-line);
  border-left: 4px solid var(--pt-green-700);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
  animation: count-pop 160ms ease;
}
.count-card.is-again { border-left-color: #d97706; background: #fffbeb; }
.count-card.is-extra { border-left-color: #f59e0b; }
.count-card.is-unknown { border-left-color: #dc2626; background: #fef2f2; }

@keyframes count-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .count-card { animation: none; }
  .count-meter-fill { transition: none; }
}

.count-card-flag {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  color: #b45309;
}
.count-card-flag.is-extra { color: #b45309; }
.count-card-desc {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--pt-ink);
}
.count-card-code {
  margin: 2px 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pt-muted);
  letter-spacing: 0.03em;
}
.count-card-note { margin: 4px 0 0; font-size: 13px; color: var(--pt-slate); line-height: 1.6; }
/* What the Excel says is on the shelf: its own band under the code — the label small, the number
   large enough to read at arm's length, in the green the counted figures wear. */
.count-card-system {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  background: #ecfdf5;
}
.count-card-system-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--pt-slate); }
.count-card-system-label svg { color: var(--pt-green-700); flex: none; }
.count-card-system-qty { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; color: var(--pt-green-700); }
.count-card-system.is-none { border-color: var(--pt-line); background: var(--pt-line-soft, #f1f5f9); }
.count-card-system.is-none .count-card-system-qty { font-size: 14px; color: var(--pt-slate); }

.count-qty-field { display: grid; gap: 6px; margin-top: 14px; }
.count-qty-label { font-size: 12px; font-weight: 800; color: var(--pt-slate); }
.count-qty {
  width: 100%;
  min-height: 62px;
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.06em;
}
/* The browser's own up/down arrows are a 12px target beside a 62px box. */
.count-qty::-webkit-outer-spin-button,
.count-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.count-qty { -moz-appearance: textfield; appearance: textfield; }

.count-qty-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; }
.count-step {
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  background: #fff;
  color: var(--pt-ink);
  font: 700 26px/1 var(--font-display);
  cursor: pointer;
  touch-action: manipulation;
}
.count-step:hover { border-color: var(--pt-green); }
.count-step:active { background: var(--pt-bg); }

.count-card-do { display: flex; gap: 8px; margin-top: 12px; }
.count-card-do .btn { flex: 1; min-height: 48px; }
.count-save { font-weight: 800; }

/* Read a second time: what the line already holds, said large — it is the
   number the two buttons below are about. */
.count-before {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #f59e0b;
  border-radius: 12px;
  background: #fff;
}
.count-before strong { font-size: 17px; font-weight: 800; color: #92400e; }
.count-before span { font-size: 12px; color: var(--pt-muted); }
/* Three buttons do not sit on one line with their totals in them: the two
   that save take a row each, and the way out sits under them. */
.count-card-do.is-choice { flex-wrap: wrap; }
.count-card-do.is-choice .btn { flex: 1 1 220px; white-space: normal; }
.count-replace { font-weight: 700; }

/* --- what has been counted ------------------------------------------------ */

/* Lines counted and still on the phone: how many, and a way to send them now */
.count-waiting {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
  margin: 10px 0; padding: 10px 12px; border: 1px solid #e6c36a; border-radius: 12px; background: #fff8e1; color: #5b4300;
}
.count-waiting.is-failed { border-color: #e3a29a; background: #fdecea; color: #7a1f17; }
.count-waiting-text { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; font-size: 13.5px; }
.count-waiting-text span { font-size: 12.5px; }
.count-waiting .btn { min-height: 44px; }
.count-item.is-waiting .count-item-tick { background: #fff3cd; color: #5b4300; }

.count-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.count-list-title { margin: 0; font-size: 14px; font-weight: 800; color: var(--pt-ink); }
.count-list-tally { font-size: 12px; font-weight: 700; color: var(--pt-muted); }

.count-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.count-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  background: #fff;
}
.count-item-tick {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
}
.count-item-text { display: grid; gap: 1px; min-width: 0; }
.count-item-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pt-ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
.count-item-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--pt-muted);
}
.count-item-figures { display: grid; justify-items: end; line-height: 1.15; }
.count-item-qty {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 800;
  color: var(--pt-green-700);
}
/* The Excel's figure under the counted one: quiet when they agree, amber when they do not. */
.count-item-system { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.count-item-system.is-same { color: var(--pt-muted); }
.count-item-system.is-off { color: #b45309; }
.count-item-do { display: flex; gap: 4px; }
.count-item-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pt-line);
  border-radius: 9px;
  background: #fff;
  color: var(--pt-slate);
  font-size: 14px;
  cursor: pointer;
}
.count-item-btn:hover { border-color: var(--pt-green); color: var(--pt-ink); }
.count-item-btn.is-danger:hover { border-color: #dc2626; color: #dc2626; }

/* --- finishing ------------------------------------------------------------ */

.count-submit-bar:empty { display: none; }
.count-submit { width: 100%; min-height: 52px; font-size: 16px; font-weight: 800; border-radius: 14px; }

.count-done {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 36px 20px;
  text-align: center;
}
.count-done-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  font-size: 30px;
  font-weight: 900;
}
.count-done-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--pt-ink); }
.count-done-sub { margin: 0; font-size: 14px; color: var(--pt-slate); }
.count-done-voucher {
  margin: 2px 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--pt-muted);
}
.count-done-tally { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--pt-slate); }
.count-done-do { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.count-done-do .btn { min-height: 46px; }

/* --- nothing yet, and waiting --------------------------------------------- */

.count-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 18px; text-align: center; }
.count-empty-mark { font-size: 30px; line-height: 1; }
.count-empty .btn { margin-top: 10px; min-height: 48px; padding-left: 22px; padding-right: 22px; }

.count-skeleton { display: grid; gap: 10px; }
.count-skeleton-bar {
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--pt-line-soft) 25%, #f7f9fc 50%, var(--pt-line-soft) 75%);
  background-size: 400% 100%;
  animation: count-shimmer 1.4s ease-in-out infinite;
}
@keyframes count-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .count-skeleton-bar { animation: none; } }

/* ---------------------------------------------------------------------------
   The board Head Office watches the shops from.
   --------------------------------------------------------------------------- */

.count-board { display: grid; gap: 14px; }
.count-head--board { background: linear-gradient(140deg, #14304f 0%, #1d4d7c 100%); }

.count-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.count-tile {
  display: grid;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  text-align: left;
  min-width: 0;
}
button.count-tile { cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
button.count-tile:hover { border-color: var(--pt-green); }
.count-tile.is-on { border-color: var(--pt-ink); background: var(--pt-line-soft); }
.count-tile-value { font-size: 20px; font-weight: 800; line-height: 1.15; color: var(--pt-ink); }
.count-tile-label { font-size: 12px; font-weight: 700; color: var(--pt-muted); }
.count-tile.is-done .count-tile-value { color: #15803d; }
.count-tile.is-open .count-tile-value { color: #b45309; }

.count-board-bar { display: grid; }
.count-board-search { min-width: 0; }

.count-board-table { max-height: none; }
.count-board-row { cursor: pointer; }
.count-board-row:hover { background: var(--pt-line-soft); }
.count-board-shop { font-weight: 700; color: var(--pt-ink); }
.count-board-go { color: var(--pt-muted); font-size: 18px; }

.count-state {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.count-state.is-done { background: #dcfce7; color: #15803d; }
.count-state.is-open { background: #fef3c7; color: #b45309; }

/* The same rows as cards; which of the two is shown is this file's business. */
.count-board-cards { display: none; }

/* --- one shop, in a sheet -------------------------------------------------- */

.count-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.5);
}
.count-sheet-card {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: 86vh;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  animation: count-pop 180ms ease;
}
.count-sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pt-line);
}
.count-sheet-head b { display: block; font-size: 15px; color: var(--pt-ink); }
.count-sheet-sub {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--pt-muted);
}
.count-sheet-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--pt-line);
  border-radius: 9px;
  background: #fff;
  color: var(--pt-slate);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.count-sheet-body { padding: 14px 16px 18px; overflow-y: auto; }
.count-sheet-tally { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--pt-slate); }

/* ---------------------------------------------------------------------------
   The phone, which is where this is actually used.
   --------------------------------------------------------------------------- */

@media (max-width: 760px) {
  /* Submit follows the thumb rather than the end of two hundred rows. */
  .count-submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    margin: 0 -4px;
    background: linear-gradient(to top, var(--pt-bg) 72%, rgba(255, 255, 255, 0));
  }

  .count-head-shop { font-size: 18px; }
  .count-scan-big { min-height: 62px; font-size: 17px; }
  .count-qty { min-height: 66px; font-size: 32px; }
  .count-card-do { flex-direction: column-reverse; }
  .count-card-do .btn { width: 100%; }
  /* The choice reads downwards in the order it is offered: add, replace, leave. */
  .count-card-do.is-choice { flex-direction: column; flex-wrap: nowrap; }
  .count-card-do.is-choice .btn { flex: 0 0 auto; }
  /* Every row here is counted; the tick says nothing the list title does not,
     and the name needs the room. */
  .count-item { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 10px; }
  .count-item-tick { display: none; }
  .count-qty-row { grid-template-columns: 60px minmax(0, 1fr) 60px; }

  .count-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* A five-column table at 375px is a table dragged sideways. */
  .count-board-table { display: none; }
  .count-board-cards { display: grid; gap: 8px; }
  .count-board-card {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--pt-line);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .count-board-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .count-board-card-sub { font-size: 12px; color: var(--pt-muted); }

  /* The detail comes up from the bottom, which is where a phone keeps one. */
  .count-sheet { align-items: flex-end; padding: 0; }
  .count-sheet-card {
    width: 100%;
    max-height: 90vh;
    border-radius: 18px 18px 0 0;
    animation: count-rise 200ms ease;
  }
  @keyframes count-rise {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

.count-qty-edit { width: 90px; text-align: right; }
.count-search { margin: 8px 0; }
.count-total { margin: 8px 0; font-size: 13px; font-weight: 700; color: var(--pt-slate); }
.count-new-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.count-new-row .field-input { flex: 1 1 220px; }

/* The camera, over everything, with the picture itself doing the explaining. */
.scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.86);
}
.scan-sheet { display: grid; gap: 12px; justify-items: center; width: min(460px, 100%); }
.scan-frame { position: relative; width: 100%; border-radius: 18px; overflow: hidden; background: #000; }
.scan-video { display: block; width: 100%; max-height: 62vh; object-fit: cover; }
.scan-window {
  position: absolute;
  inset: 22% 10%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.35);
}
.scan-hint { margin: 0; color: #fff; font-size: 14px; text-align: center; }
.scan-trouble {
  display: grid; gap: 10px; width: 100%; padding: 18px 16px 12px; border-radius: 14px;
  background: #fff; color: var(--pt-ink, #0f172a); box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.scan-trouble-title { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.5; }
.scan-trouble-why { margin: 0; font-size: 13.5px; line-height: 1.6; color: #475569; }
.scan-trouble-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.6; }
.scan-trouble-do { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.scan-trouble-do .btn { min-height: 44px; }
/* The way that works (Chrome) first and across; the others beneath it. */
.scan-trouble-do > a.btn--primary { grid-column: 1 / -1; order: -1; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.scan-trouble-code { margin: 0; font-size: 12px; color: var(--pt-muted); text-align: right; font-family: ui-monospace, monospace; }

/* --- Stock Check: what is short, and what settles what -------------------- */
.count-voucher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 10px 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--pt-line-soft);
  font-size: 14px;
}
.count-voucher-label { color: var(--pt-muted); font-size: 12px; font-weight: 700; }

.count-diff { font-weight: 800; }
.count-diff.is-short { color: #b91c1c; }
.count-diff.is-over { color: #0369a1; }

.count-summary {
  margin: 14px 0 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--pt-line);
  background: #fff;
  text-align: center;
}
.count-summary.is-short { border-color: #fca5a5; background: #fef2f2; }
.count-summary.is-over { border-color: #93c5fd; background: #eff6ff; }
.count-summary.is-level { border-color: #86efac; background: #f0fdf4; }
.count-summary-big { margin: 0; font-size: 18px; font-weight: 800; color: var(--pt-ink); }
.count-summary-sub { margin: 4px 0 0; font-size: 13px; color: var(--pt-slate); }

.count-offset-list { display: grid; gap: 12px; margin: 12px 0; }
.count-offset {
  padding: 12px;
  border: 1px solid var(--pt-line);
  border-radius: 16px;
  background: #fff;
}
.count-offset-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.count-offset-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--pt-ink); }
.count-offset-sum { font-size: 13px; font-weight: 800; color: var(--pt-green-700); white-space: nowrap; }
.count-offset-left { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--pt-slate); }

/* The filter bar for whoever looks across the shops: which shop, which days. */
.count-chooser { margin-bottom: 8px; }
.count-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  background: #fff;
}
.count-filter-label { font-size: 12px; font-weight: 700; color: var(--pt-muted); white-space: nowrap; }
.count-shop-pick { flex: 1 1 200px; max-width: 320px; }
.count-date { flex: 0 1 160px; }
.count-pick-slot { margin-top: 8px; }
.count-filter-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.count-filter-field.is-shop { flex: 1 1 260px; max-width: 400px; }
.count-filter-field.is-shop .count-shop-pick { max-width: none; }
@media (max-width: 640px) {
  /* The shop across, the two dates side by side, clear under them. */
  .count-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end; }
  .count-filter-field { display: grid; gap: 4px; }
  .count-filter-field.is-shop { grid-column: 1 / -1; max-width: none; }
  .count-shop-pick, .count-date { width: 100%; max-width: none; min-height: 44px; }
  .count-filter > .btn { grid-column: 1 / -1; justify-self: start; }
}

/* Setup: the three lists the office keeps, and Customer's two kinds. */
.setup-shell { margin-top: 4px; }

.cust-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.cust-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--pt-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pt-slate);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.cust-tab:hover { border-color: var(--pt-green); }
.cust-tab.is-active { background: var(--pt-green-700); border-color: var(--pt-green-700); color: #fff; }
.cust-tab-count {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--pt-line-soft);
  color: var(--pt-slate);
  font-size: 12px;
}
.cust-tab.is-active .cust-tab-count { background: rgba(255, 255, 255, 0.22); color: #fff; }


/* Location: a shop to a row, searched and ticked, not a paragraph of boxes. */
.loc-dialog { width: min(520px, 94vw); text-align: left; }
.loc-dialog-head { margin-bottom: 10px; }
.loc-dialog .confirm-title { text-align: left; }
.loc-dialog .confirm-message { text-align: left; margin: 2px 0 0; }

.loc-tools { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.loc-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--pt-slate); }

.loc-list {
  max-height: min(48vh, 420px);
  overflow-y: auto;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  background: #fff;
}
.loc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--pt-line-soft);
  font-size: 14px;
  cursor: pointer;
}
.loc-row:last-child { border-bottom: 0; }
.loc-row:hover { background: var(--pt-bg); }
.loc-row input { width: 18px; height: 18px; flex: none; accent-color: var(--pt-green-700); }
.loc-row-name { flex: 1; min-width: 0; }
.loc-row.is-own { background: var(--pt-line-soft); cursor: default; }
.loc-own-tag {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--pt-green-700);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.loc-empty { margin: 0; padding: 18px; text-align: center; color: var(--pt-muted); font-size: 13px; }

.loc-summary { font-size: 12px; color: var(--pt-muted); white-space: nowrap; }
.loc-summary.is-set { color: var(--pt-green-700); font-weight: 700; }

/* A Settings page that holds its own pages has no card around it. */
.settings-body--plain { padding: 0; border: 0; background: none; }

/* Wholesale Daily Sale: the day's head, and the row being typed. */
.ws-head { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 12px; align-items: center; }
.ws-head-cell { display: flex; align-items: center; gap: 8px; }
.ws-head-label { font-size: 12px; font-weight: 700; color: var(--pt-muted); }
.ws-head-cell .field-input { min-width: 200px; }
.ws-head-cell .count-name { margin: 0; }

.ws-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--pt-line);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 12px;
}
.ws-form .field-input { flex: 1 1 160px; min-width: 0; }
.ws-form .btn { flex: 0 0 auto; }

.fin-table tr.is-editing { background: #fffbeb; }
.ws-month { max-width: 180px; }
.ws-detail { width: min(680px, 94vw); text-align: left; }
.ws-detail .confirm-title, .ws-detail .confirm-message { text-align: left; }

@media (max-width: 640px) {
  .ws-form .field-input, .ws-form .btn { flex: 1 1 100%; }
  .ws-head-cell { flex: 1 1 100%; }
}

/* The voucher list: a line a count, opened on a double click. */
.count-vouchers tbody tr { cursor: pointer; }
.count-vouchers tbody tr:hover { background: var(--pt-bg); }
.count-vouchers tbody tr:focus-visible { outline: 2px solid var(--pt-green); outline-offset: -2px; }
.count-vouchers input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--pt-green-700); }
.count-vouchers td.is-mono { font-size: 12.5px; }

.count-remark-cell { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.count-remark-text {
  flex: 1;
  min-width: 0;
  color: #b45309;
  font-size: 13px;
  white-space: normal;
}

/* The voucher's box: title and ✕ above, Excel and Close below, the lines
   scrolling between them under a heading that stays put. */
@media (min-width: 641px) {
  dialog.ucx-sheet.is-wide.count-voucher-box { width: min(980px, calc(100vw - 32px)); max-height: 92vh; }
}
.count-voucher-box .ucx-sheet-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
.count-detail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.count-detail .count-voucher-remark { flex: none; flex-wrap: wrap; }
.count-detail .count-voucher-remark .count-remark-cell { flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.count-detail .count-voucher-remark .count-remark-text { flex: 1 1 9em; }
.count-detail > .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0; }
.count-detail thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); }
.count-remark-done {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.count-voucher-remark {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--pt-line-soft);
}
.count-voucher-label { font-size: 12px; font-weight: 700; color: var(--pt-muted); white-space: nowrap; }
.count-remark-box { width: min(420px, 94vw); }
.count-remark-box .field-input { width: 100%; margin: 6px 0 4px; }

.count-state { font-weight: 700; font-size: 12px; white-space: nowrap; }
.count-state.is-short { color: #b91c1c; }
.count-state.is-over { color: #0369a1; }

/* A PO opened as a box, and the note against it. */
/* ===========================================================================
   The PO list.

   A table on a desk and cards on a phone, out of the same rows. Above both:
   four figures about the whole book, the stage tabs, and one line of
   filters. Below: how many of how many, and the pages.
   =========================================================================== */

.po-list { display: grid; gap: 14px; }
.po-list > * { min-width: 0; }

/* --- the four figures ----------------------------------------------------- */

.po-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.po-stat {
  display: grid;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font: inherit;
  text-align: left;
  min-width: 0;
}
button.po-stat { cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
button.po-stat:hover { border-color: var(--accent); }
.po-stat.is-on { border-color: var(--ink); background: var(--surface-alt); }

.po-stat-value {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.po-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.5;
}
/* Two of the four are problems, and are coloured as problems only when there
   actually is one: an orange nought is an alarm about nothing. */
.po-stat.is-some.is-warn .po-stat-value,
.po-stat.is-some.is-stuck .po-stat-value { color: var(--warning); }
.po-stat.is-some.is-warn, .po-stat.is-some.is-stuck { border-color: #F0D9A0; }

/* --- filters -------------------------------------------------------------- */

.po-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.po-search, .po-filter { min-width: 0; }

/* --- the bar that arrives with the first tick ----------------------------- */

.po-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  animation: po-rise 160ms ease;
}
.po-bulk-count { font-size: 13px; font-weight: 700; color: var(--accent-deep); }
.po-bulk-spacer { flex: 1 1 auto; }

@keyframes po-rise {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- the table ------------------------------------------------------------ */

.po-table-wrap { max-height: none; }
.po-table th, .po-table td { padding: 9px 10px; }
/* A list wider than the window scrolls sideways; what is done to a row (its
   last cell) stays at the right edge instead of scrolling out of reach. Only
   where it is a table: as cards (860px and under) nothing scrolls sideways. */
@media (min-width: 861px) {
  .po-table th:last-child, .po-table td:last-child,
  .dl-table th:last-child, .dl-table td:last-child {
    position: sticky; right: 0; z-index: 1; background: var(--surface);
    box-shadow: -1px 0 0 var(--border);
  }
  .po-table thead th:last-child, .dl-table thead th:last-child { z-index: 3; background: var(--surface-alt); }
  .po-table tbody tr:hover td:last-child { background: var(--surface-alt); }
  /* A pinned cell is a layer of its own, and the rows after it are laid over
     it. With its menu open it goes above them, and above the heading the
     menu may open up over. */
  .po-table td.has-menu-open, .dl-table td.has-menu-open { z-index: 4; }
}
.po-table tbody tr { transition: background 120ms ease; }
.po-table tbody tr:hover { background: var(--surface-alt); }

.po-th-tick { width: 34px; }
.po-th-do { width: 1%; }

.po-voucher {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.po-when { display: block; font-size: 12px; color: var(--ink-faint); }
/* Widths, so nine columns fit a laptop rather than sliding off it. A name
   or a note too long for its column is cut with the whole of it on the
   hover, which is better than a row three lines deep. */
.po-supplier {
  min-width: 130px;
  max-width: 180px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-table .pur-remark-cell { max-width: 150px; }
.po-table .pur-remark-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-packed { font-family: var(--font-mono); }

/* An order nobody has chased in a week wears it on the whole row, not just
   in the one cell somebody has to be looking at. */
.po-table tbody tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

.po-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.po-badge.is-ordered { background: var(--warning-soft); color: var(--warning); }
.po-badge.is-packed  { background: var(--surface-alt);  color: var(--ink-soft); }
.po-badge.is-partial { background: #E4EEFF;             color: #1D4ED8; }
.po-badge.is-sent    { background: var(--success-soft); color: #0C7150; }
.po-badge.is-closed  { background: var(--surface-alt);  color: var(--ink-faint); }

/* --- everything else the row can do --------------------------------------- */

.po-menu { position: relative; display: inline-block; }
.po-menu-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}
.po-menu-button::-webkit-details-marker { display: none; }
.po-menu-button:hover { border-color: var(--accent); color: var(--ink); }
.po-menu[open] .po-menu-button { border-color: var(--ink); color: var(--ink); }

.po-menu-list {
  position: fixed;              /* placed by the page: see moreMenu() */
  z-index: 60;
  display: grid;
  min-width: 168px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: po-rise 120ms ease;
}
.po-menu-item {
  padding: 9px 11px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
}
.po-menu-item:hover { background: var(--surface-alt); }
.po-menu-item.is-danger { color: var(--danger); }
.po-menu-item.is-danger:hover { background: var(--danger-soft); }

/* --- how many of how many, and the pages ---------------------------------- */

.po-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.po-foot-count { font-size: 12px; color: var(--ink-soft); }
.po-pager { display: flex; align-items: center; gap: 8px; }
.po-pager-at { font-size: 12px; font-weight: 700; color: var(--ink-soft); }

/* --- waiting -------------------------------------------------------------- */

.po-skeleton {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.po-skeleton-row {
  height: 34px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-alt) 25%, #F7F9FC 50%, var(--surface-alt) 75%);
  background-size: 400% 100%;
  animation: po-shimmer 1.4s ease-in-out infinite;
}
@keyframes po-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .po-skeleton-row { animation: none; }
  .po-bulk, .po-menu-list { animation: none; }
}

/* --- the phone ------------------------------------------------------------ */

/* The cards exist on every screen and are shown on one. */
.po-cards { display: none; }

@media (max-width: 760px) {
  .po-table-wrap { display: none; }
  .po-cards { display: grid; gap: 10px; }

  .po-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-toolbar { grid-template-columns: minmax(0, 1fr); }

  .po-card {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .po-card.is-overdue { border-left-color: var(--warning); }

  .po-card-top { display: flex; align-items: center; gap: 9px; }
  .po-card-top .po-voucher { flex: 1 1 auto; }
  .po-card-supplier { margin: 0; font-size: 13px; color: var(--ink-soft); }

  .po-card-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    margin: 0;
  }
  .po-card-fact { display: grid; gap: 1px; min-width: 0; }
  .po-card-fact dt { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
  .po-card-fact dd {
    margin: 0;
    font-size: 13px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .po-card-remark {
    margin: 0;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 12px;
  }
  .po-card-do { display: flex; align-items: center; gap: 8px; }
  .po-card-do .btn { flex: 1 1 auto; }
  .po-foot { justify-content: center; }
}

/* ---------------------------------------------------------------------------
   The order itself: a drawer down the right of the screen on a desk, and a
   sheet up from the bottom on a phone. It used to be a box in the middle,
   which covered the list it came out of.
   --------------------------------------------------------------------------- */

.pur-detail-box {
  width: min(880px, 100vw);
  max-width: 100vw;
  max-height: 100vh;
  height: 100vh;
  margin: 0 0 0 auto;
  padding: 20px 24px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: auto;
  overscroll-behavior: contain;
  text-align: left;
  animation: po-slide-in 200ms ease;
}
.pur-detail-box .fin-form { margin: 0; }

/* The order's number stays at the top of the drawer while a thousand lines
   of it go past underneath. */
.pur-detail-box .pur-detail-head {
  position: sticky;
  top: -20px;
  z-index: 3;
  margin: -20px -24px 14px;
  padding: 16px 24px 12px;
  background: var(--surface);
}
.pur-detail-box .pur-detail-id { flex: 1 1 auto; align-items: flex-start; }

.po-drawer-close {
  margin-left: auto;
  align-self: flex-start;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.po-drawer-close:hover { border-color: var(--ink); color: var(--ink); }

@keyframes po-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@media (max-width: 760px) {
  .pur-detail-box .pur-detail-head {
    top: -16px;
    margin: -16px -16px 12px;
    padding: 14px 16px 10px;
  }
  .pur-detail-box {
    width: 100vw;
    height: auto;
    max-height: 92vh;
    margin: auto 0 0;
    padding: 16px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: po-slide-up 200ms ease;
  }
  @keyframes po-slide-up {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pur-detail-box { animation: none; }
}

.pur-detail-remark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--pt-line-soft);
}
.pur-remark-text { flex: 1; min-width: 0; color: #b45309; font-size: 13px; font-weight: 600; }
.pur-remark-text.is-none { color: var(--pt-muted); font-weight: 400; }
.btn.is-noted { border-color: #f59e0b; color: #b45309; }

/* ===========================================================================
   Way Check.

   Two screens out of one stylesheet. The phone gets a map with a card under
   it; Head Office gets counts, a list and a big map side by side, which on a
   narrow screen folds into the map with the list as a sheet over it.

   Freshness is a colour and it is the same colour everywhere: green is a
   position from the last three minutes, amber is going quiet, grey has
   stopped. Anybody who learns it on the summary tiles already knows it on
   the pins.
   =========================================================================== */

.way-map {
  position: relative;
  min-height: 240px;
  border: 1px solid var(--pt-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--pt-line-soft);
  z-index: 0;                 /* Leaflet's panes sit above a page, not a dialog */
}
.way-map-note {
  margin: 0;
  padding: 40px 16px;
  text-align: center;
  color: var(--pt-muted);
  font-size: 13px;
}

/* The map's own controls, over its top-right corner. */
.way-tools {
  position: absolute;
  bottom: 26px;           /* clear of Leaflet's attribution line */
  right: 10px;
  z-index: 500;               /* above Leaflet's tiles and markers */
  display: grid;
  gap: 6px;
}
.way-tool {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pt-line);
  border-radius: 10px;
  background: #fff;
  color: var(--pt-ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  transition: background 120ms ease, border-color 120ms ease;
}
.way-tool:hover { background: var(--pt-line-soft); border-color: var(--pt-green); }
.way-tool:active { transform: translateY(1px); }

/* A pin carries the person's initials so a map of six people reads without
   clicking any of them. */
.way-pin {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
}
.way-pin.is-live    { background: #16a34a; }
.way-pin.is-stale   { background: #d97706; }
.way-pin.is-offline { background: #94a3b8; }

/* Several people in one township, gathered into the number of them. */
.way-cluster {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--pt-green-700);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.32);
}

/* ---------------------------------------------------------------------------
   The phone: map, card, and one honest paragraph.
   --------------------------------------------------------------------------- */

.way-mine { display: grid; gap: 12px; }
.way-mine-map { position: relative; }
.way-mine .way-map { height: min(46vh, 380px); }

.way-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--pt-line);
  border-left: 4px solid #cbd5e1;
  border-radius: 14px;
  background: #fff;
}
.way-card.is-live    { border-left-color: #16a34a; background: #f0fdf4; }
.way-card.is-stale   { border-left-color: #d97706; background: #fffbeb; }
.way-card.is-offline,
.way-card.is-denied  { border-left-color: #dc2626; background: #fef2f2; }
.way-card.is-asking  { border-left-color: #0284c7; background: #f0f9ff; }

.way-card-line { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.way-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #94a3b8;
  flex: none;
}
.way-dot.is-live   { background: #16a34a; }
.way-dot.is-stale  { background: #d97706; }
.way-dot.is-denied,
.way-dot.is-offline { background: #dc2626; }
/* Only the one that is actually doing something moves. */
.way-dot.is-asking { background: #0284c7; animation: way-pulse 1.4s ease-in-out infinite; }

@keyframes way-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .way-dot.is-asking { animation: none; }
}

.way-card-sub { margin: 0; font-size: 13px; color: var(--pt-ink); }
.way-privacy { margin: 0; font-size: 12px; color: var(--pt-muted); line-height: 1.6; }
.way-until { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--pt-green-700); }
.way-queued { margin: 0; font-size: 12.5px; font-weight: 700; color: #b45309; }
.way-warn { margin: 0; font-size: 12px; color: var(--pt-muted); line-height: 1.6; }
.way-card.is-queued { border-left-color: #d97706; background: #fffbeb; }
.way-dot.is-queued { background: #d97706; }
.way-honest {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pt-line-soft);
  color: var(--pt-muted);
  font-size: 12px;
  line-height: 1.7;
}
.way-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8; color: var(--pt-ink); }
.way-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.way-share { min-width: 160px; }

/* ---------------------------------------------------------------------------
   Head Office: counts, list, map.
   --------------------------------------------------------------------------- */

.way-office { display: grid; gap: 12px; }
.way-office-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.way-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.way-tile {
  display: grid;
  gap: 2px;
  min-width: 88px;
  padding: 9px 14px;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.way-tile.is-total { cursor: default; }
.way-tile-value { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--pt-ink); }
.way-tile-label { font-size: 12px; font-weight: 700; color: var(--pt-muted); }
.way-tile.is-live .way-tile-value    { color: #16a34a; }
.way-tile.is-stale .way-tile-value   { color: #d97706; }
.way-tile.is-offline .way-tile-value { color: #64748b; }
.way-tile:not(.is-total):hover { border-color: var(--pt-green); }
.way-tile.is-on { border-color: var(--pt-ink); background: var(--pt-line-soft); }

.way-office-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.way-side { display: grid; gap: 10px; min-width: 0; }
.way-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.way-search { grid-column: 1 / -1; }
.way-filter { min-width: 0; }

.way-office-map { position: relative; }
.way-office .way-map { height: min(72vh, 660px); }

/* The list scrolls inside its own box; the page does not grow a second
   scrollbar because forty people are sharing. */
.way-people {
  display: grid;
  gap: 6px;
  align-content: start;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  padding-right: 2px;
}
.way-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.way-person:hover { border-color: var(--pt-green); }
.way-person.is-picked { border-color: var(--pt-green-700); background: #f0fdf4; }
.way-person.is-offline { opacity: 0.72; }

.way-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #94a3b8;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex: none;
}
.way-avatar.is-live    { background: #16a34a; }
.way-avatar.is-stale   { background: #d97706; }
.way-avatar.is-offline { background: #94a3b8; }

.way-person-text { display: grid; gap: 1px; min-width: 0; }
.way-person-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--pt-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.way-person-sub {
  font-size: 12px;
  color: var(--pt-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.way-chip {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.way-chip.is-live    { background: #dcfce7; color: #15803d; }
.way-chip.is-stale   { background: #fef3c7; color: #b45309; }
.way-chip.is-offline { background: #e2e8f0; color: #475569; }
.way-chip.is-done { background: #ede9fe; color: #6d28d9; }

/* One person: on a laptop this is a panel over the right of the map, which
   is where a map keeps the thing you just clicked; on a phone it rides up
   inside the sheet with the list. */
.way-detail:empty { display: none; }
.way-detail-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--pt-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.16);
}

@media (min-width: 861px) {
  .way-detail {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 268px;
    z-index: 500;         /* over Leaflet's panes */
  }
}
.way-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.way-detail-who { display: grid; gap: 1px; min-width: 0; }
.way-detail-who b { font-size: 14px; color: var(--pt-ink); }
.way-detail-close {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--pt-muted);
  cursor: pointer;
  padding: 0 4px;
}
.way-detail-close:hover { color: var(--pt-ink); }

.way-facts { display: grid; gap: 6px; margin: 0; }
.way-fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: 12px; }
.way-fact dt { color: var(--pt-muted); font-weight: 700; }
.way-fact dd { margin: 0; color: var(--pt-ink); overflow-wrap: anywhere; }
.way-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The sheet handle belongs to the phone only. */
.way-sheet-grab { display: none; }

/* ---------------------------------------------------------------------------
   The phone's shape for the office screen: the map is the page, and the list
   comes up over it. Not the desktop layout made narrow.
   --------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .way-office-body { grid-template-columns: minmax(0, 1fr); position: relative; }
  .way-office-map { order: -1; }
  .way-office .way-map { height: 58vh; }

  .way-summary { width: 100%; }
  .way-tile { flex: 1 1 0; min-width: 70px; padding: 8px 10px; }
  .way-tile-value { font-size: 17px; }

  /* The side becomes a sheet. Closed, only its handle shows over the bottom
     of the map -- so the count is always readable and one tap brings the
     list up over the lower half of the screen. */
  .way-side {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    gap: 8px;
    align-content: start;
    max-height: 74vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
    transform: translateY(calc(100% - var(--way-grab, 62px)));
    transition: transform 220ms ease;
  }
  .way-office.sheet-open .way-side { transform: translateY(0); }

  /* The handle stays put while the list under it scrolls. */
  .way-sheet-grab {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 2px;
    border: 1px solid var(--pt-line);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    color: var(--pt-ink);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
  }

  /* Room under the map for the handle that sits over it, and the map's own
     buttons lifted clear of it. */
  .way-office-body { padding-bottom: 58px; }
  .way-office-map .way-tools { bottom: 84px; }
  /* With the list up over the map, its buttons have nothing to act on. */
  .way-office.sheet-open .way-tools { opacity: 0; pointer-events: none; }

  .way-people { max-height: 46vh; }
  .way-filters { grid-template-columns: 1fr 1fr; }

  .way-mine .way-map { height: 42vh; }
  .way-share { width: 100%; }
  .way-card-actions .btn { flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .way-side { transition: none; }
}

/* ===========================================================================
   Supplier မှ LG သို့ — shipments waiting for a route.

   One row, one line, one height. The row used to be three lines deep
   because the saved time had a column of its own and wrapped in it, and the
   three boxes typed into were each a different size.
   =========================================================================== */

.dl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  background: var(--pt-line-soft);
}
.dl-toolbar-pick { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dl-toolbar-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--pt-muted);
  white-space: nowrap;
}
.dl-toolbar-pick .field-input { min-width: 0; width: auto; min-height: 36px; }
/* A divider without a divider: the doing is pushed away from the picking. */
.dl-toolbar-do { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.dl-toolbar-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--pt-green-700);
  white-space: nowrap;
}

/* --- one row, one line ----------------------------------------------------- */

.dl-table th, .dl-table td { padding-left: 9px; padding-right: 9px; }
.dl-table td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.dl-row { height: 56px; }

.dl-th-tick { width: 34px; }
.dl-th-do { width: 1%; white-space: nowrap; }

.dl-table td:nth-child(2) { max-width: 156px; }
.dl-voucher {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pt-ink);
  line-height: 1.3;
  white-space: nowrap;
}
.dl-when {
  display: block;
  font-size: 12px;
  color: var(--pt-muted);
  line-height: 1.3;
  white-space: nowrap;
}

.dl-supplier, .dl-tracking { white-space: nowrap; }
.dl-supplier { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* Every box on the row the same height, and none of them taller than it. */
.dl-table .field-input {
  min-height: 38px;
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13.5px;
}
.dl-table .pur-rcly-input { width: 128px; }
.dl-table .pur-date { width: 136px; }
.dl-table .fin-amount-input { width: 72px; text-align: right; }

.dl-table .fin-td-actions { display: flex; align-items: center; gap: 6px; }
.dl-table .fin-td-actions .btn + .btn { margin-left: 0; }

/* A delivery on a phone: the tick and voucher across the top, then the
   supplier and DL, RCLY and LG date, the figures, and the box count beside
   the actions. The desk's fixed 56px row height would stack every card on
   the next one. */
@media (max-width: 720px) {
  .dl-row { height: auto; }
  .fin-table.dl-table tr.dl-row {
    grid-template-columns: 28px repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "tick voucher voucher"
      ". supplier dl"
      ". rcly date"
      ". qty total"
      ". box box"
      "act act act";
    align-items: end;
    gap: 8px 12px;
  }
  .dl-table .dl-row > td:nth-child(1) { grid-area: tick; align-self: center; width: auto; }
  .dl-table .dl-row > td:nth-child(2) { grid-area: voucher; max-width: none; }
  .dl-table .dl-row > td:nth-child(3) { grid-area: supplier; }
  .dl-table .dl-row > td:nth-child(4) { grid-area: dl; }
  .dl-table .dl-row > td:nth-child(5) { grid-area: rcly; }
  .dl-table .dl-row > td:nth-child(6) { grid-area: date; }
  .dl-table .dl-row > td:nth-child(7) { grid-area: qty; }
  .dl-table .dl-row > td:nth-child(8) { grid-area: total; }
  .dl-table .dl-row > td:nth-child(9) { grid-area: box; }
  .dl-table .dl-row > td:nth-child(10) { grid-area: act; width: auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-top: 8px; }
  .dl-table .dl-row > td:nth-child(9) .field-input { max-width: 50%; }
  .dl-table .dl-supplier, .dl-table .dl-tracking { white-space: normal; max-width: none; }
  .dl-table .dl-voucher { white-space: normal; font-size: 15px; }
  .dl-table .field-input, .dl-table .pur-rcly-input, .dl-table .pur-date, .dl-table .fin-amount-input { width: 100%; height: 42px; min-height: 42px; font-size: 16px; }
}

@media (max-width: 860px) {
  .dl-toolbar-do { margin-left: 0; width: 100%; }
  .dl-toolbar-do .btn { flex: 1 1 auto; }
  .dl-toolbar-count { width: 100%; }
}


/* A sign-in that came after wrong passwords, on the Logins page. */
.dash-failed { color: #b91c1c; font-weight: 700; }

/* --- Way Check: manual check-in ---------------------------------------------- */
.wayc-card { display: grid; gap: 10px; }
.wayc-lead { margin: 0; color: var(--pt-ink); }
.wayc-checkin { min-height: 56px; font-size: 17px; width: 100%; }
.wayc-day-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.wayc-date { min-height: 40px; }
.wayc-timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.wayc-stop { display: flex; align-items: stretch; gap: 6px; }
.wayc-stop-btn {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 8px 10px; border: 1px solid var(--pt-line, #e2e8f0); border-radius: 10px;
  background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.wayc-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #16a34a; color: #fff; font-weight: 800; font-size: 13px;
}
.wayc-stop-text { display: grid; gap: 1px; min-width: 0; }
.wayc-time { font-weight: 700; }
.wayc-note { overflow-wrap: anywhere; }
.wayc-meta { font-size: 12px; color: #475569; }
.wayc-open {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px;
  border: 1px solid var(--pt-line, #e2e8f0); border-radius: 10px; text-decoration: none; color: inherit;
}
.wayc-denied { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: #fef2f2; color: #7f1d1d; }

/* --- Monitoring: Audit Log ---------------------------------------------------- */
.audit-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.audit-bar .field-input { min-height: 40px; }
.audit-when { white-space: nowrap; }
.audit-role { color: #475569; font-size: 12px; }
.audit-action { font-weight: 700; }
.audit-note { display: block; font-size: 12px; color: #475569; }
.audit-change { font-size: 12px; overflow-wrap: anywhere; max-width: 320px; }
.audit-before { color: #b91c1c; }
.audit-after { color: #15803d; }

/* A module this person may not export from: its export buttons are not shown
   (export-guard.js). The file is refused underneath as well. */
body.no-export [data-export] { display: none !important; }

/* Stock Check on a phone: tables become one card per line. */
@media (max-width: 760px) {
  .table-wrap:has(> .count-table--book),
  .table-wrap:has(> .count-table--diff),
  .table-wrap:has(> .count-vouchers) { overflow: visible; max-height: none; border: 0; background: none; box-shadow: none; }
  .count-table--book, .count-table--book tbody,
  .count-table--diff, .count-table--diff tbody,
  .count-vouchers, .count-vouchers tbody { display: block; }
  .count-table--book thead, .count-table--diff thead, .count-vouchers thead { display: none; }
  .count-table--book tr, .count-table--diff tr, .count-vouchers tr {
    display: grid;
    align-items: center;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--pt-line);
    border-radius: 12px;
    background: #fff;
  }
  .count-table--book td, .count-table--diff td, .count-vouchers td {
    padding: 0; border: 0; white-space: normal; min-width: 0; text-align: left;
  }
  .count-table--diff td[data-label]::before, .count-vouchers td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--pt-muted);
  }

  /* History: the name, the number on the right, code and who underneath. */
  .count-table--book tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "desc qty" "code qty" "by act";
    gap: 2px 12px;
  }
  .count-table--book td:nth-child(1) { grid-area: code; font-family: var(--font-mono); font-size: 12px; color: var(--pt-muted); }
  .count-table--book td:nth-child(2) { grid-area: desc; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
  .count-table--book td:nth-child(3) { grid-area: qty; }
  .count-table--book td:nth-child(4) { grid-area: by; font-size: 12px; color: var(--pt-muted); }
  .count-table--book td:nth-child(5) { grid-area: act; justify-self: end; }
  .count-table--book .count-qty-edit { width: 84px; min-height: 44px; font-size: 18px; font-weight: 800; text-align: center; }

  /* One voucher: the name and short/over first, then the three numbers. */
  .count-table--diff tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "desc desc state" "code code code" "exp got diff";
    gap: 4px 10px;
  }
  .count-table--diff td:nth-child(1) { grid-area: code; font-size: 12px; color: var(--pt-muted); }
  .count-table--diff td:nth-child(2) { grid-area: desc; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
  .count-table--diff td:nth-child(3) { grid-area: exp; }
  .count-table--diff td:nth-child(4) { grid-area: got; }
  .count-table--diff td:nth-child(5) { grid-area: diff; }
  .count-table--diff td:nth-child(6) { grid-area: state; justify-self: end; align-self: start; }
  .count-table--diff td:nth-child(n+3):nth-child(-n+5) { padding-top: 6px; border-top: 1px solid var(--pt-line); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

  /* The voucher list: shop, day and voucher, then short and over. */
  .count-vouchers tr {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "tick shop shop open" "tick date date open" ". voucher voucher voucher" ". short over over" ". remark remark remark";
    gap: 4px 10px;
  }
  .count-vouchers td:nth-child(1) { grid-area: tick; align-self: start; }
  .count-vouchers td:nth-child(2) { grid-area: date; font-size: 12.5px; color: var(--pt-muted); }
  .count-vouchers td:nth-child(3) { grid-area: shop; font-weight: 800; font-size: 15px; }
  .count-vouchers td:nth-child(4) { grid-area: voucher; font-size: 12px; color: var(--pt-muted); overflow-wrap: anywhere; margin-top: -2px; }
  .count-vouchers td:nth-child(5) { grid-area: remark; }
  .count-vouchers td:nth-child(5):has(.count-remark-cell:empty) { display: none; }
  .count-vouchers td:nth-child(6) { grid-area: short; }
  .count-vouchers td:nth-child(7) { grid-area: over; }
  .count-vouchers td:nth-child(6), .count-vouchers td:nth-child(7) { padding-top: 6px; border-top: 1px solid var(--pt-line); font-size: 16px; font-weight: 800; }
  .count-vouchers td:nth-child(6):empty, .count-vouchers td:nth-child(7):empty { visibility: hidden; }
  .count-vouchers td:nth-child(8) { grid-area: open; align-self: start; }
  .count-vouchers .count-remark-cell { min-width: 0; }
  .count-vouchers input[type="checkbox"] { width: 20px; height: 20px; }
}

/* Files: the name box says what it is. */
.count-new-name { display: grid; gap: 4px; flex: 1 1 220px; }
.count-new-row { align-items: end; }
.count-file-state { font-size: 12.5px; font-weight: 700; color: #b45309; }
.count-file-state.is-done { color: var(--pt-green-700); }
.count-files .row-actions > button:last-child:hover { border-color: #dc2626; color: #dc2626; }

@media (max-width: 760px) {
  .table-wrap:has(> .count-files) { overflow: visible; max-height: none; border: 0; background: none; box-shadow: none; }
  .count-files, .count-files tbody { display: block; }
  .count-files thead { display: none; }
  .count-files tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name state" "shop items" "act act";
    gap: 4px 12px;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--pt-line);
    border-radius: 12px;
    background: #fff;
  }
  .count-files td { padding: 0; border: 0; white-space: normal; min-width: 0; text-align: left; }
  .count-files td:nth-child(1) { grid-area: name; font-weight: 800; }
  .count-files td:nth-child(2) { grid-area: shop; font-size: 13px; color: var(--pt-slate); }
  .count-files td:nth-child(3) { grid-area: items; font-size: 13px; color: var(--pt-slate); text-align: right; }
  .count-files td:nth-child(3)::before { content: attr(data-label) " "; }
  .count-files td:nth-child(4) { grid-area: state; text-align: right; }
  .count-files td:nth-child(5) { grid-area: act; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--pt-line); }
  .count-files .row-actions { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; }
  .count-files .row-actions .btn { min-height: 40px; width: 100%; padding-inline: 6px; font-size: 13px; white-space: nowrap; }
}

/* History: the counts as cards; a picked one opens in a box. */
.count-hist-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 10px; }
.count-hist-card {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 14px 40px 14px 16px;
  border: 1px solid var(--pt-line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.count-hist-card:hover { border-color: var(--pt-green); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07); }
.count-hist-card:focus-visible { outline: 2px solid var(--pt-green); outline-offset: 2px; }
.count-hist-card.is-current { border-color: var(--pt-green-700); box-shadow: inset 3px 0 0 var(--pt-green-700); }
.count-hist-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.count-hist-shop { font-size: 15px; font-weight: 800; color: var(--pt-ink); min-width: 0; overflow-wrap: anywhere; }
.count-hist-day { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 700; color: var(--pt-slate); }
.count-hist-sub { font-size: 12.5px; color: var(--pt-muted); }
.count-hist-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--pt-muted); display: grid; }

.count-sheet--wide .count-sheet-card { width: min(980px, 100%); max-height: 90vh; }
.count-sheet--wide .count-sheet-body { flex: 1; min-height: 0; }
.count-sheet--wide .table-wrap { max-height: none; overflow: visible; }
.count-sheet--wide .count-search { margin: 0 0 8px; }
.count-sheet-close { display: grid; place-items: center; width: 40px; height: 40px; }
.count-sheet-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pt-line);
  background: #fff;
}
.count-sheet-foot:empty { display: none; }
@media (max-width: 760px) {
  .count-hist-list { grid-template-columns: 1fr; }
  .count-sheet--wide .count-sheet-card { max-height: 92vh; }
  .count-sheet-foot .btn { flex: 1; min-height: 48px; }
  .count-sheet--wide .count-table--book tr { background: var(--pt-bg); }
}

/* Sale Target on a phone: one shop a line — the name, a big box for the
   target, and what follows from it underneath. 16px keeps iOS from zooming
   in every time a box is tapped. */
.tgt-date { display: inline-flex; align-items: center; gap: 6px; }
.tgt-group-field { display: contents; }
.tgt-group-lbl { display: none; }
@media (max-width: 720px) {
  .tgt-toolbar--create { display: grid; gap: 10px; }
  .tgt-toolbar--create .tgt-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
  .tgt-toolbar--create .tgt-period .fin-bar-label { grid-column: 1; }
  .tgt-toolbar--create .tgt-period .tgt-days { grid-column: 2; grid-row: 1; justify-self: end; }
  .tgt-date { min-width: 0; }
  .tgt-date .field-input { flex: 1; min-width: 0; width: 100%; min-height: 44px; font-size: 16px; }
  .tgt-date span { flex: none; font-size: 12.5px; color: var(--pt-muted); }
  .tgt-toolbar--create .tgt-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tgt-toolbar--create .tgt-search { grid-column: 1 / -1; width: 100%; min-height: 44px; font-size: 16px; }
  .tgt-toolbar--create .tgt-actions .btn { width: 100%; min-height: 42px; justify-content: center; }

  .fin-table.tgt-table tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px;
    grid-template-areas: "shop shop amt" "daily group amt";
    align-items: center;
    gap: 2px 12px;
    padding: 10px 12px;
  }
  .tgt-table td:nth-child(1) { display: none; }
  .tgt-table td:nth-child(2) { grid-area: shop; font-weight: 700; font-size: 14.5px; }
  .tgt-table td:nth-child(3) { grid-area: amt; }
  .tgt-table td:nth-child(4) { grid-area: daily; font-size: 12.5px; color: var(--pt-slate); }
  .tgt-table td:nth-child(5) { grid-area: group; text-align: left; }
  .tgt-table td:nth-child(4)::before, .tgt-table td:nth-child(5)::before { font-size: 12px; }
  .tgt-table .tgt-amount { width: 100%; min-height: 44px; font-size: 16px; font-weight: 700; }
  .fin-table.tgt-table tr.tgt-total { background: #fff7c2; border-color: #fde68a; }
  .fin-table.tgt-table tr.tgt-total td { background: none; }
  .fin-table.tgt-table tr.tgt-total td:nth-child(3) { font-size: 17px; text-align: right; }
  .fin-table.tgt-table tr.tgt-total td:nth-child(4) { grid-area: daily; }
  .tgt-save { flex-wrap: wrap; gap: 6px; }
  .tgt-save .btn { flex: 1 1 100%; min-height: 48px; }
  .tgt-save .form-note { flex: 1 1 100%; order: -1; font-size: 12.5px; }
  .tgt-save .form-note:empty { display: none; }
  .fin-table.tgt-table tr.tgt-total td { border: 0; }

  .tgt-group-head { display: none; }
  .tgt-group-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    grid-template-areas: "name name del" "min max del";
    align-items: end;
    padding: 10px;
    border: 1px solid var(--pt-line);
    border-radius: 12px;
    background: var(--pt-bg);
  }
  .tgt-group-field { display: grid; gap: 3px; min-width: 0; }
  .tgt-group-field:nth-child(1) { grid-area: name; }
  .tgt-group-field:nth-child(2) { grid-area: min; }
  .tgt-group-field:nth-child(3) { grid-area: max; }
  .tgt-group-row > button { grid-area: del; align-self: start; min-width: 40px; min-height: 40px; }
  .tgt-group-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--pt-muted); }
  .tgt-group-field .field-input { min-height: 44px; font-size: 16px; }
}

/* Target History on a phone: the shop as the card's title, each month's
   target under the month it belongs to. */
@media (max-width: 720px) {
  .tgt-history td:nth-child(1) { display: none; }
  .fin-table.tgt-history td:nth-child(2) { grid-column: 1 / -1; font-weight: 800; font-size: 14.5px; }
  .fin-table.tgt-history:not(.tgt-history--ws) td:nth-child(2) { display: flex; align-items: center; }
  .fin-table.tgt-history tr.tgt-total { background: #fff7c2; border-color: #fde68a; }
  .fin-table.tgt-history tr.tgt-total td { background: none; border: 0; }
  /* Wholesale's has no running number: the salesman is the first cell. */
  .fin-table.tgt-history--ws td:nth-child(1) { display: grid; grid-column: 1 / -1; font-weight: 800; font-size: 14.5px; }
  .fin-table.tgt-history--ws td:nth-child(2) { grid-column: auto; font-weight: inherit; font-size: 15px; }
}

/* Target Calculate on a phone: a list in place of the sheet (desk unchanged). */
.tgm { display: none; }
@media (max-width: 720px) {
  .tgt-report-wide, .tgt-summary { display: none; }
  .tgm { display: grid; gap: 10px; margin-top: 8px; }

  .tgt-toolbar:not(.tgt-toolbar--create) .tgt-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .tgt-toolbar:not(.tgt-toolbar--create) .tgt-actions > * { width: 100%; min-height: 42px; justify-content: center; }
  .tgt-toolbar:not(.tgt-toolbar--create) .tgt-actions > .btn--primary { grid-column: 1 / -1; }
  /* Grouped: each group a row of equal buttons, the send button the width of the page. */
  .tgt-toolbar.tgt-toolbar--grouped .tgt-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .tgt-toolbar.tgt-toolbar--grouped .tgt-actions > .tgt-btn-group { width: 100%; min-height: 0; }
  .tgt-btn-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tgt-btn-row > * { width: 100%; min-height: 44px; justify-content: center; padding-left: 6px; padding-right: 6px; font-size: 13px; }
  /* A file button is a span round a hidden input and the button: the button fills the span. */
  .tgt-btn-row > span { display: flex; min-width: 0; }
  .tgt-btn-row > span > .btn { flex: 1 1 auto; min-width: 0; min-height: 44px; justify-content: center; padding-left: 6px; padding-right: 6px; font-size: 13px; white-space: normal; line-height: 1.2; }
  .tgt-btn-row > .btn { white-space: normal; line-height: 1.2; }
  .tgt-toolbar--grouped .tgt-actions > .btn { width: 100%; min-height: 48px; justify-content: center; }
  .tgt-toolbar--grouped .tgt-period { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; }
  .tgt-toolbar--grouped .tgt-period-day { min-width: 0; }
  .tgt-toolbar--grouped .tgt-period-day .field-input { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 16px; }
  .tgt-toolbar--grouped .tgt-period > .btn { min-height: 44px; }
  .tgt-toolbar--grouped .tgt-days { grid-column: 1 / -1; }
  .tgt-toolbar:not(.tgt-toolbar--create) .tgt-period > .field-input { min-height: 44px; font-size: 16px; }

  .tgm-bar { position: relative; display: block; height: 7px; border-radius: 999px; background: var(--pt-line); }
  .tgm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--pt-green-700); }
  .tgm-pace { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--pt-ink); }

  .tgm-hero { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--pt-line); }
  .tgm-hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .tgm-hero-label { font-size: 13px; font-weight: 800; color: var(--pt-slate); }
  .tgm-hero-pct { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 800; line-height: 1; color: var(--pt-green-700); }
  .tgm-hero .tgm-bar { height: 10px; }
  .tgm-hero-nums { margin: 0; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--pt-slate); }
  .tgm-hero-nums b { font-size: 17px; color: var(--pt-ink); }
  .tgm-pace-note, .tgm-hero-sub { margin: 0; font-size: 12px; color: var(--pt-muted); line-height: 1.5; }
  .tgm-pace-key { display: inline-block; width: 2px; height: 11px; margin-right: 6px; background: var(--pt-ink); vertical-align: -1px; }

  .tgm-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--pt-line); }
  .tgm-seg-btn { min-height: 40px; padding: 4px 6px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--pt-slate); cursor: pointer; }
  .tgm-seg-btn.is-on { background: #fff; color: var(--pt-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
  .tgm-hint { margin: -2px 0 0; font-size: 12px; color: var(--pt-muted); }

  .tgm-list { display: grid; gap: 12px; }
  .tgm-block { display: grid; border: 1px solid var(--pt-line); border-radius: 14px; background: #fff; overflow: hidden; }
  .tgm-group-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
    padding: 10px 14px; background: #fff7c2; border-bottom: 1px solid #fde68a;
  }
  .tgm-group-name { font-weight: 800; font-size: 14px; color: var(--pt-ink); }
  .tgm-group-name small { font-weight: 600; color: var(--pt-slate); font-size: 12px; }
  .tgm-group-pct { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 800; color: var(--pt-green-700); }
  .tgm-group-head.is-behind .tgm-group-pct { color: #dc2626; }
  .tgm-group-head .tgm-sub { grid-column: 1 / -1; }

  .tgm-row + .tgm-row { border-top: 1px solid var(--pt-line); }
  .tgm-row summary {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center;
    padding: 12px 14px; list-style: none; cursor: pointer;
  }
  .tgm-row summary::-webkit-details-marker { display: none; }
  .tgm-row summary .tgm-bar { grid-column: 1 / -1; }
  .tgm-row[open] summary { background: var(--pt-bg); }
  .tgm-name { font-weight: 700; font-size: 14px; color: var(--pt-ink); min-width: 0; overflow-wrap: anywhere; }
  .tgm-group { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #dcfce7; color: var(--pt-green-700); font-size: 12px; font-weight: 800; vertical-align: 1px; }
  .tgm-pct { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; color: var(--pt-green-700); }
  .tgm-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--pt-slate); }
  .tgm-flag { padding: 0 7px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-family: var(--font-body); font-size: 12px; font-weight: 800; }
  .tgm-row.is-behind .tgm-pct, .tgm-hero.is-behind .tgm-hero-pct { color: #dc2626; }
  .tgm-row.is-behind .tgm-bar i, .tgm-hero.is-behind .tgm-bar i { background: #dc2626; }
  .tgm-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 4px 14px 14px; background: var(--pt-bg); }
  .tgm-more dt { font-size: 12px; font-weight: 700; color: var(--pt-muted); }
  .tgm-more dd { margin: 0; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; color: var(--pt-ink); }
}

/* Shop Check history on a phone: the shop and its percentage first, the day,
   who checked and the score under them. */
@media (max-width: 720px) {
  .fin-table.check-list tr {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "shop shop pct" "date by score";
    align-items: center;
    gap: 4px 10px;
    padding: 12px 14px;
    cursor: pointer;
  }
  .check-list td:nth-child(1) { grid-area: date; font-size: 12.5px; color: var(--pt-slate); }
  .check-list td:nth-child(2) { grid-area: shop; font-weight: 800; font-size: 14.5px; }
  .check-list td:nth-child(3) { grid-area: by; font-size: 12.5px; color: var(--pt-muted); }
  .check-list td:nth-child(4) { grid-area: score; font-size: 13px; text-align: right; }
  .check-list td:nth-child(5) { grid-area: pct; }
}

/* Shop Check: one visit in a box. The desk reads the table, a phone the cards. */
.check-sheet .count-sheet-head { grid-template-columns: minmax(0, 1fr) auto auto; }
.check-sheet-sub { display: block; font-size: 12px; color: var(--pt-muted); }
.check-sheet .check-comment { margin-top: 12px; }
.check-sheet .fin-table-wrap { max-height: none; }
.check-detail-cards { display: none; }
.check-sheet .count-sheet-foot .is-danger:hover { border-color: #dc2626; color: #dc2626; }
@media (max-width: 720px) {
  .check-detail-wide { display: none; }
  .check-detail-cards { display: grid; gap: 12px; }
  .check-dc { border: 1px solid var(--pt-line); border-radius: 12px; overflow: hidden; background: #fff; }
  .check-dc-head {
    display: flex; justify-content: space-between; gap: 10px; margin: 0;
    padding: 10px 12px; background: var(--pt-bg); border-bottom: 1px solid var(--pt-line);
    font-size: 13.5px; font-weight: 800; color: var(--pt-ink);
  }
  .check-dc-sub { flex: none; font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--pt-slate); }
  .check-dc-point {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) 34px; gap: 4px 8px; align-items: start;
    padding: 10px 12px;
  }
  .check-dc-point + .check-dc-point { border-top: 1px solid var(--pt-line); }
  .check-dc-no { font-size: 12px; font-weight: 700; color: var(--pt-muted); padding-top: 2px; }
  .check-dc-text { font-size: 13.5px; line-height: 1.45; color: var(--pt-ink); }
  .check-dc-score {
    display: grid; place-items: center; width: 34px; height: 30px; border-radius: 8px;
    font-family: var(--font-display); font-size: 16px; font-weight: 800; background: var(--pt-bg);
  }
  .check-dc-reason {
    grid-column: 2 / -1; margin: 0; padding: 6px 8px; border-radius: 8px;
    background: #fffbeb; color: #92400e; font-size: 12.5px; line-height: 1.5;
  }
  .check-dc-total {
    display: flex; justify-content: space-between; align-items: baseline; margin: 0;
    padding: 12px; border-radius: 12px; background: #fff7c2; font-weight: 700;
  }
  .check-dc-total b { font-family: var(--font-display); font-size: 20px; }
  .check-sheet .count-sheet-foot { flex-wrap: wrap; }
  .check-sheet .count-sheet-foot .btn { flex: 1 1 30%; min-height: 44px; padding-inline: 8px; font-size: 13.5px; white-space: nowrap; }
}
.check-setup-points { resize: vertical; overflow: hidden; min-height: 120px; line-height: 1.6; }

/* Login Dashboard: a search above the list; on a phone, a card per sign-in. */
.dash-search { max-width: 420px; margin: 4px 0 10px; }
.dash-none { text-align: center; color: var(--pt-muted); padding: 20px; }
@media (max-width: 720px) {
  .dash-search { max-width: none; }
  .table-wrap:has(> .dash-log) { overflow: visible; max-height: none; border: 0; background: none; }
  .dash-log, .dash-log tbody { display: block; }
  .dash-log thead { display: none; }
  .dash-log tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px;
    margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--pt-line); border-radius: 12px; background: #fff;
  }
  .dash-log td { padding: 0; border: 0; white-space: normal; min-width: 0; font-size: 13px; }
  .dash-log td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--pt-muted); }
  .dash-log .dash-who { grid-row: 1; grid-column: 1; font-weight: 800; font-size: 15px; }
  .dash-log .dash-when { grid-row: 1; grid-column: 2; text-align: right; font-size: 12px; color: var(--pt-slate); }
  .dash-log .dash-device { grid-column: 1 / -1; font-size: 12px; color: var(--pt-muted); }
  .dash-log .dash-none { grid-column: 1 / -1; }
}

/* Audit Log on a phone: the date and the kind side by side, the search under
   them; each change a card — what, who and when on top, then to whom and
   from what to what. */
@media (max-width: 720px) {
  .audit-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-bar input[type="search"] { grid-column: 1 / -1; }
  .audit-bar .field-input { width: 100%; min-width: 0; }
  .table-wrap:has(> .audit-table) { overflow: visible; max-height: none; border: 0; background: none; }
  .audit-table, .audit-table tbody { display: block; }
  .audit-table thead { display: none; }
  .audit-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
    grid-template-areas: "what when" "who who" "subject subject" "change change";
    margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--pt-line); border-radius: 12px; background: #fff;
  }
  .audit-table td { padding: 0; border: 0; white-space: normal; min-width: 0; font-size: 13px; }
  .audit-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--pt-muted); }
  .audit-table .audit-what { grid-area: what; font-size: 14.5px; }
  .audit-table .audit-when { grid-area: when; font-size: 12px; color: var(--pt-slate); text-align: right; }
  .audit-table .audit-who { grid-area: who; color: var(--pt-slate); }
  .audit-table .audit-subject { grid-area: subject; }
  .audit-table .audit-change { grid-area: change; max-width: none; }
  .audit-table .audit-change:empty { display: none; }
}

/* Older posts and earlier comments, read only when asked for. */
.ann-load-more { display: block; margin: 12px auto 0; min-height: 44px; }
.post-earlier { display: block; margin: 0 0 10px; min-height: 36px; }

/* The smallest phones (320–360px): Target Create's two dates one above the
   other, each whole — side by side the date was cut ("01/10/202"). */
@media (max-width: 360px) {
  .tgt-toolbar--create .tgt-period { grid-template-columns: minmax(0, 1fr); }
  .tgt-toolbar--create .tgt-period .tgt-days { grid-column: 1; grid-row: auto; justify-self: start; }
}
/* A long button label wraps rather than being cut (Calculate History's "Excel for all"). */
@media (max-width: 720px) {
  .tgt-toolbar .tgt-actions > .btn { white-space: normal; line-height: 1.25; }
}

/* One person's day: the places first, the shops on "Detail" (2026-10-26). */
.way-overview { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; background: var(--pt-green-50, #f0fdf4); }
.way-overview-n { font-weight: 700; color: var(--pt-ink); }
.way-detail-more { margin-left: auto; }
@media (min-width: 861px) {
  .way-detail-card { max-height: calc(100% - 28px); overflow: auto; }
}

/* The order opens as a box in the middle (2026-10-31, the user's word),
   not a drawer down the side; a phone keeps its sheet from the bottom. */
@media (min-width: 761px) {
  .pur-detail-box {
    width: min(1100px, calc(100vw - 48px));
    height: auto;
    max-height: 90vh;
    margin: auto;
    border-radius: var(--radius-lg);
    animation: po-box-in 160ms ease;
  }
}
@keyframes po-box-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* A row a double-click opens. */
tr.is-openable, article.is-openable { cursor: pointer; }
tr.is-openable:hover td { background: var(--surface-alt, #f8fafc); }
.pur-box { display: grid; gap: 12px; }
.pur-box-table td { vertical-align: top; }
.pur-split { margin: 6px 0; }
.pur-split > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 0; }

/* An order's remarks: each with its date and who wrote it, newest first (2026-11-02) */
.pur-remarks { display: grid; gap: 8px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--pt-line-soft); }
.pur-remarks-head { display: flex; align-items: center; gap: 8px; }
.pur-remarks-head .btn { margin-left: auto; }
.pur-remarks-n { padding: 1px 8px; border-radius: 999px; background: var(--surface, #fff); color: var(--pt-muted); font-size: 11.5px; font-weight: 700; }
.pur-remark-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 220px; overflow-y: auto; }
.pur-remark { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 7px 10px; border-radius: 9px; background: var(--surface, #fff); border: 1px solid var(--pt-line); }
.pur-remark.is-latest { border-color: #f5c27a; background: #fffaf2; }
.pur-remark-when { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--pt-slate); white-space: nowrap; }
.pur-remark .pur-remark-text { font-size: 13.5px; overflow-wrap: anywhere; }
.pur-remark-by { font-size: 12px; color: var(--pt-muted); white-space: nowrap; }
.pur-remark-fail:empty { display: none; }
.pur-remark-fail { margin: 0; color: var(--danger, #b9322b); font-size: 13px; font-weight: 600; }
@media (max-width: 560px) {
  .pur-remark { grid-template-columns: 1fr auto; }
  .pur-remark .pur-remark-text { grid-column: 1 / -1; }
}