/* ============================================================================
   DevPlan — document register styles
   Tokens only (see styles.css :root). No literal colours anywhere.
   Mobile first: designed at 390px; tap targets >= var(--tap).

   COLOUR CARRIES MEANING HERE, SO IT IS RATIONED.
     accent  — your move. A document we are still waiting for.
     danger  — something is wrong with a file we already hold.
     ok      — in hand and usable.
     muted   — settled, no longer anybody's problem (superseded, not needed).
   Nothing else on this screen is coloured, which is what makes the coloured
   things findable in a scroll of forty rows. Colour is never the only signal:
   every row also carries a badge with words in it.

   The filter reuses .qn-chip from client.css rather than inventing a fourth
   segmented control — same shape, same active treatment, one product.
   ========================================================================= */

/* One reading measure for the whole screen, matching the questionnaire column
   so the two tabs do not read as two different products. */
.dr-root {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------- summary -- */
/* The three numbers that answer "where are we". Missing and wrong come first
   and come big: they are the ones somebody has to act on. Received is the
   settled number and reads as reassurance, not as an instruction. */

.dr-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.dr-stat {
  flex: 1 1 8rem;          /* two across at 390px, three when there is room */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dr-stat__n {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.dr-stat__l {
  font-size: .82rem;
  line-height: 1.3;
  color: var(--text-muted);
}

/* A document we are waiting for is a request, not a failure — so it wears the
   same accent as every other "your move" control in the app, never danger. */
.dr-stat--needed {
  background: var(--accent-wash);
  border-color: var(--accent);
}
.dr-stat--needed .dr-stat__n,
.dr-stat--needed .dr-stat__l { color: var(--accent); }

.dr-stat--problem {
  background: var(--danger-wash);
  border-color: var(--danger);
}
.dr-stat--problem .dr-stat__n,
.dr-stat--problem .dr-stat__l { color: var(--danger); }

/* Settled: full width under the two actionable ones, and quiet. */
.dr-stat--received {
  flex: 1 1 100%;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  background: var(--surface-2);
}
.dr-stat--received .dr-stat__n {
  font-size: 1.1rem;
  color: var(--ok);
}

.dr-summary__rest { margin: 0 0 12px; }

/* -------------------------------------------------------------- filter -- */
/* The chips are .qn-chip from client.css. The row is local because these four
   are a fixed set: they wrap onto a second line at 390px rather than scrolling
   sideways like the round chips, so no filter is ever hidden off the edge. */

.dr-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.dr-count { margin: 0 0 4px; min-height: 1.2em; }

/* Room under the last row. A list that ends flush against the bottom edge of
   the phone reads as cut off rather than finished. */
.dr-body { padding-bottom: 32px; }

/* ------------------------------------------------------------ category -- */
/* A quiet label, not a headline. The rows are the content; the category is
   only how they are stacked. */

.dr-cat { margin-top: 22px; }
.dr-cat:first-child { margin-top: 8px; }

.dr-cat__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.dr-cat__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.dr-cat__n {
  flex: none;
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.dr-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------- item -- */
/* The status rail on the left edge is what makes the list scannable at arm's
   length; the badge is what makes it legible to somebody who cannot see the
   rail. Both, always. */

.dr-item {
  padding: 14px 0 16px 12px;
  border-left: 3px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dr-item:last-child { border-bottom: 0; }

.dr-item--needed   { border-left-color: var(--accent); }
.dr-item--problem  { border-left-color: var(--danger); }
.dr-item--received { border-left-color: var(--ok); }
.dr-item--quiet    { border-left-color: var(--border-strong); }

.dr-item__head {
  display: flex;
  flex-wrap: wrap;      /* the badge drops below a long title rather than
                           squeezing it into two characters a line */
  align-items: baseline;
  gap: 6px 10px;
}

/* A Russian document title is long and every word of it is load-bearing.
   It wraps. It is never truncated. */
.dr-item__title {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dr-item__desc {
  margin: 4px 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* The consultant's own words about this item. Set apart from the description
   because it is a remark, not a definition. */
.dr-item__note {
  margin: 8px 0 0;
  padding-left: 10px;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-muted);
  border-left: 2px solid var(--border);
  overflow-wrap: anywhere;
}

.dr-item__meta {
  margin: 8px 0 0;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.dr-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Two buttons side by side at 390px, both still a full tap target. */
.dr-action {
  flex: 1 1 9rem;
  min-width: 0;
  padding: 0 12px;
  font-size: .92rem;
}

.dr-item__msg {
  margin: 8px 0 0;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.dr-item__msg:empty { margin: 0; }
.dr-item__msg--error { color: var(--danger); }

/* --------------------------------------------------------------- badge -- */

.dr-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface-2);
}
.dr-badge--needed {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: var(--accent);
}
.dr-badge--problem {
  color: var(--danger);
  background: var(--danger-wash);
  border-color: var(--danger);
}
.dr-badge--received {
  color: var(--ok);
  background: var(--ok-wash);
  border-color: var(--ok);
}
.dr-badge--quiet {
  color: var(--text-faint);
  background: var(--surface-sunk);
}

/* -------------------------------------------------------------- issues -- */
/* What is wrong with a file we already hold, in the client's words. Chips
   rather than a sentence because there are often three of them and they are
   read as a checklist of things to fix. */

.dr-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.dr-issue {
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--danger);
  background: var(--danger-wash);
  border: 1px solid var(--danger);
  border-radius: 999px;
  overflow-wrap: anywhere;
}

/* Superseded or not needed: what was wrong with it is a matter of record now,
   so it stops shouting. Nobody has to act on it. */
.dr-issues--quiet .dr-issue {
  color: var(--text-faint);
  background: var(--surface-sunk);
  border-color: var(--border);
}

/* --------------------------------------------------------- empty states -- */

.dr-empty h2 { margin-bottom: .3em; }
.dr-empty p:last-child { margin-bottom: 0; }

.dr-none {
  margin: 20px 0 0;
  padding: 18px 16px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ============================================================================
   PREVIEW DIALOG
   Images only — see canPreview() in register.js for why a PDF is not drawn in
   an iframe on this phone. Escape closes it, the X closes it, the scrim closes
   it, focus is trapped inside it and goes back to the button that opened it.
   ========================================================================= */

.dr-modal {
  position: fixed;
  inset: 0;
  /* above .chrome (20) and .preview-banner (30), same layer as .acct-modal */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);

  /* Dimming with tokens only, exactly as account.css does it: in light mode the
     darkest token is --text, in dark mode it is --surface-sunk. Alpha comes
     from opacity, so no rgba() literal is needed. */
  --dr-scrim: var(--text);
  --dr-scrim-alpha: .45;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dr-modal {
    --dr-scrim: var(--surface-sunk);
    --dr-scrim-alpha: .74;
  }
}

/* Explicit override wins over the media query in both directions. */
:root[data-theme="dark"] .dr-modal {
  --dr-scrim: var(--surface-sunk);
  --dr-scrim-alpha: .74;
}
:root[data-theme="light"] .dr-modal {
  --dr-scrim: var(--text);
  --dr-scrim-alpha: .45;
}

.dr-modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--dr-scrim);
  opacity: var(--dr-scrim-alpha);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: dr-fade 160ms ease-out;
}

.dr-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - var(--gutter) * 2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  animation: dr-pop 170ms cubic-bezier(.2, .8, .3, 1);
}

@keyframes dr-fade {
  from { opacity: 0; }
  to   { opacity: var(--dr-scrim-alpha); }
}

@keyframes dr-pop {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.dr-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 8px 18px;
  border-bottom: 1px solid var(--border);
}

.dr-modal__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 6px 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}

.dr-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--speed) ease, color var(--speed) ease;
}
.dr-modal__close:hover {
  color: var(--text);
  background: var(--surface-2);
}
.dr-modal__close:active { background: var(--surface-sunk); }

/* The scrolling part. A sunk surface behind the image so a photographed
   receipt on white paper still has an edge. */
.dr-modal__body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-sunk);
}

.dr-modal__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.dr-modal__msg { margin: 0; text-align: center; }

.dr-modal__foot {
  display: flex;
  gap: 10px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
}
.dr-modal__foot .dr-action { flex: 1 1 0; }

.dr-modal .dr-item__msg { padding: 0 18px; }

/* At 390px the dialog is the screen. Corners go, the image gets the height. */
@media (max-width: 480px) {
  .dr-modal { padding: 0; }

  .dr-modal__dialog {
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-width: 0;
    border-radius: 0;
  }

  .dr-modal__head { padding: 10px 10px 8px 16px; }
}