/* ── Time Off view (SHARED) ──────────────────────────────────────────────────
   Ask Caleb Tech LLC

   Styles only for what this view adds. Everything structural — .section,
   .section-label, .field, .field-row, .field-note, .req, .submit-btn — is
   deliberately borrowed from the HOST app's stylesheet, so the page looks like
   the app it is mounted in rather than like a third design. That is also why
   colours below are the host's custom properties, with a literal fallback for
   the one app that might not define a given token.

   Loaded after each app's app.css (it only adds `.to-*` rules, and adding them
   later keeps a host override cheap).

   The Sept 2026 portal added the LIST half — cards, status chips, Withdraw.
   The cards deliberately do NOT reuse the driver app's .dispatch-card: that
   class exists in one app and not the other, which is the same trap .field-row
   sprang on the form (see .to-row below).
   ───────────────────────────────────────────────────────────────────────── */

.to-view {
  max-width: 900px;
  margin: 0 auto;
}

/* Two-up rows. Deliberately NOT the host's .field-row: the driver app defines
   that class and the dispatcher app does not, so borrowing it laid the form out
   differently in each app. Layout the view controls itself; everything INSIDE a
   row (.field, labels, inputs) still comes from the host, which is what keeps
   the form looking native in both. */
.to-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .to-row { grid-template-columns: 1fr; }
}

.to-intro {
  font-size: 13px;
  line-height: 1.5;
  color: var(--dark-gray, #4b5563);
  margin: 0 0 16px;
}

/* The plain-language echo of the dates. Reads as a quiet confirmation, not a
   warning — it is shown for every valid range, including the retroactive case
   (which appends its own sentence rather than changing colour). */
.to-summary {
  font-size: 13px;
  line-height: 1.5;
  color: var(--dark-gray, #4b5563);
  background: var(--light-gray, #f9f7f5);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 4px 0 0;
}

/* ── Panes and the banner that outlives them ───────────────────────────────
   The flash sits OUTSIDE both panes on purpose: a filed request switches from
   the form to the list, and the confirmation has to survive that switch. */

.to-flash {
  font-size: 14px;
  line-height: 1.5;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 16px;
}

.to-flash--ok {
  color: var(--dark-gray, #4b5563);
  background: rgba(16, 122, 87, 0.06);
  border: 1px solid rgba(16, 122, 87, 0.45);
}

.to-flash--err {
  color: var(--error, #b91c1c);
  background: rgba(185, 28, 28, 0.06);
  border: 1px solid var(--error, #b91c1c);
  font-weight: bold;
}

/* The "we could not email anybody" note inside a confirmation. The request is
   filed either way, so this is a footnote, not a failure. */
.to-flash .to-warn {
  display: inline-block;
  margin-top: 6px;
  font-weight: normal;
  color: var(--mid-gray, #6b7280);
}

.to-error {
  font-size: 14px;
  line-height: 1.5;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 16px 0 0;
  color: var(--error, #b91c1c);
  background: rgba(185, 28, 28, 0.06);
  border: 1px solid var(--error, #b91c1c);
  font-weight: bold;
}

/* ── List header ─────────────────────────────────────────────────────────── */

.to-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.to-list-head .section-label { margin: 0; }

/* 44px min-height throughout: these are tapped on an iPad, not clicked. */
.to-new-btn {
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 8px;
  background: var(--crimson, #8c0930);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.to-new-btn:hover  { background: var(--crimson-dark, #6b0724); }
.to-new-btn:active { background: var(--crimson-dark, #6b0724); }

.to-back-btn {
  min-height: 44px;
  padding: 0 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  color: var(--dark-gray, #374151);
  font-size: 14px;
  cursor: pointer;
}
.to-back-btn:hover { border-color: var(--mid-gray, #9ca3af); }

.to-loading,
.to-empty {
  font-size: 14px;
  color: var(--mid-gray, #6b7280);
  padding: 18px 2px;
  margin: 0;
}

.to-list-error {
  font-size: 14px;
  line-height: 1.5;
  color: var(--error, #b91c1c);
  background: rgba(185, 28, 28, 0.06);
  border: 1px solid var(--error, #b91c1c);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 12px;
}
.to-list-error p { margin: 0 0 8px; }

/* Its own class, not the signature pad's `.clear-btn`: that one is styled
   differently in each app (it is a link in one and a button in the other),
   which is exactly the borrowing mistake `.to-row` exists to avoid. */
.to-retry-btn {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--error, #dc2626);
  border-radius: 8px;
  background: #fff;
  color: var(--error, #dc2626);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.to-retry-btn:hover { background: #fef2f2; }

/* The standing disclaimer, repeated from the form. A portal makes "approved"
   look authoritative and invites "so how many days do I have left?", which
   this system cannot answer — so the list says so too, not just the form. */
.to-balance-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mid-gray, #6b7280);
  border-top: 1px solid var(--border, #e5e7eb);
  padding-top: 12px;
  margin: 20px 0 0;
}

/* ── Request cards ───────────────────────────────────────────────────────── */

.to-card {
  border: 1px solid var(--border, #e5e7eb);
  border-left: 4px solid var(--mid-gray, #9ca3af);
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* The left rail is the status at a glance, before any text is read. */
.to-card--submitted { border-left-color: var(--crimson, #8c0930); }
.to-card--approved  { border-left-color: var(--success, #15803d); }
.to-card--denied    { border-left-color: var(--error, #dc2626); }
.to-card--withdrawn { border-left-color: var(--mid-gray, #9ca3af); }

.to-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.to-card__id {
  font-size: 13px;
  font-weight: bold;
  color: var(--mid-gray, #6b7280);
  letter-spacing: 0.02em;
}

.to-chip {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.to-chip--submitted { background: rgba(140, 9, 48, 0.08);  color: var(--crimson, #8c0930); }
.to-chip--approved  { background: rgba(21, 128, 61, 0.10); color: var(--success, #15803d); }
.to-chip--denied    { background: rgba(220, 38, 38, 0.08); color: var(--error, #dc2626); }
.to-chip--withdrawn { background: var(--light-gray, #f3f4f6); color: var(--mid-gray, #6b7280); }

.to-card__range {
  font-size: 16px;
  font-weight: bold;
  color: var(--dark-gray, #374151);
  line-height: 1.4;
  margin-bottom: 8px;
}

.to-card__days {
  font-size: 13px;
  font-weight: normal;
  color: var(--mid-gray, #6b7280);
  white-space: nowrap;
}

.to-card__meta {
  font-size: 13px;
  line-height: 1.6;
  color: var(--dark-gray, #374151);
}

.to-card__meta .to-label {
  display: inline-block;
  min-width: 96px;
  color: var(--mid-gray, #6b7280);
}

/* The office's answer in words. A denial's reason is REQUIRED server-side and
   is the whole point of the row for the employee, so it is set apart rather
   than listed as one more meta line. */
.to-card__note {
  font-size: 13px;
  line-height: 1.5;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
}

/* pre-wrap on the TEXT, not the box: a reason typed across two lines keeps
   them, without the surrounding markup's own indentation printing with it. */
.to-note-text { white-space: pre-wrap; }
.to-card__note--deny {
  color: var(--dark-gray, #374151);
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.35);
}
.to-card__note--ok {
  color: var(--dark-gray, #374151);
  background: var(--light-gray, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
}

.to-note-label {
  display: block;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid-gray, #6b7280);
  margin-bottom: 4px;
}

.to-card__actions {
  margin-top: 12px;
}

/* Outlined, not filled: withdrawing is destructive and rare, and the filled
   crimson button on this page is the one that FILES a request. */
.to-withdraw-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--error, #dc2626);
  border-radius: 8px;
  background: #fff;
  color: var(--error, #dc2626);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.to-withdraw-btn:hover:not(:disabled)  { background: #fef2f2; }
.to-withdraw-btn:active:not(:disabled) { background: #fee2e2; }
.to-withdraw-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The signature canvas is shorter here than on the case report: this form has
   one signature rather than three, and the printed box it lands in is a single
   line. .signature-wrap / .signature-overlay themselves come from
   shared-web/signature-pad.css. */
.to-view .signature-wrap canvas {
  height: 150px;
}