/* legacy-layer: generated wrapper, see work/ui/wrap-legacy-layer.js */
@layer legacy {
/* Final visual corrections for the dashboard surfaces.
   This file is loaded after the legacy stage6/theme output so the dashboard
   does not inherit the old boxed metrics and identity-band treatment. */

/* Dashboard layout moved to xy/05-pages.css (2026-10-06 Opus rollout). */

/* The legacy input rule and the redesign wrapper both draw a field outline.
   Keep the wrapper as the only surface and make its input a transparent flex
   child so the icon, text, and focus state cannot form nested rectangles. */
.login-card .login-input-field {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 12px;
  border: 1px solid var(--xy-line-strong);
  border-radius: var(--xy-radius-md);
  background: var(--xy-canvas);
}

.login-card .login-input-field > i,
.login-card .login-input-field > svg {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  transform: none !important;
  color: var(--xy-muted);
}

.login-card .login-input-field input {
  flex: 1 1 auto !important;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

/* The late p2 operating-shell rules make this finance page transparent.
   Give its toolbar and records the same readable graphite surfaces used by
   the rest of the product while preserving the dark theme. */
body.p2-operate-active .recharge-toolbar {
  background: var(--xy-surface);
  border-top-color: var(--xy-line);
  border-bottom-color: var(--xy-line);
}

body.p2-operate-active .recharge-record {
  opacity: 1 !important;
  border-color: var(--xy-line-strong);
  background: var(--xy-raised);
  box-shadow: none;
}

body.p2-operate-active .recharge-record--reversed,
body.p2-operate-active .recharge-record--history {
  opacity: 1 !important;
  background: var(--xy-surface);
}

body.p2-operate-active .recharge-record-label,
body.p2-operate-active .recharge-record small,
body.p2-operate-active .recharge-record time,
body.p2-operate-active .recharge-stream-head {
  color: var(--xy-text-soft);
}


/* Shared actions follow the light pink in the updated logo. */
:root {
  --xy-accent: #f7b4d0;
  --xy-accent-hover: #fac8de;
  --xy-accent-soft: rgba(247, 180, 208, .12);
  --xy-accent-ink: #351321;
  --xy-role-owner: var(--xy-accent);
  --c-pink: var(--xy-accent);
  --c-pink-h: var(--xy-accent-hover);
  --c-pink-s: var(--xy-accent-soft);
  --s6-pink: var(--xy-accent);
  --s6-pink-strong: var(--xy-accent-hover);
  --s6-pink-soft: var(--xy-accent-soft);
  --brand: var(--xy-accent);
  --brand-2: var(--xy-accent-hover);
  --brand-soft: var(--xy-accent-soft);
  --primary: var(--xy-accent);
  --focus-ring: rgba(244, 241, 243, .55);
  --p1-glass-line-lit: var(--xy-line-strong);
  --p1-r6-line-lit: var(--xy-line-strong);
  --p2-line-lit: var(--xy-line-strong);
  --p2-accent-soft: var(--xy-accent-soft);
}

.primary, button.primary, a.primary {
  background: var(--xy-accent);
  border-color: transparent;
  color: var(--xy-accent-ink);
}
.primary:hover, button.primary:hover {
  background: var(--xy-accent-hover);
  border-color: transparent;
}
* { scrollbar-color: rgba(244, 241, 243, .25) transparent; }
::-webkit-scrollbar-thumb { background: rgba(244, 241, 243, .25); }
::-webkit-scrollbar-thumb:hover { background: rgba(244, 241, 243, .4); }
:focus-visible { outline-color: var(--xy-text-soft); }

/* Prevent the form shrinking inside the legacy flex login screen. */
#loginScreen:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 24px;
}
#loginForm.login-card {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 520px !important;
  max-width: 100% !important;
  margin: auto;
  padding: 40px 40px 36px;
  border: 0;
  border-radius: 8px;
  background: var(--xy-surface);
  box-shadow: var(--xy-shadow-overlay);
}
#loginForm .login-brand { gap: 16px; margin: 0 0 32px; }
#loginForm .login-brand img { width: 64px !important; height: 64px !important; border-radius: 8px; }
#loginForm .login-brand h1 { font-size: 24px; }
#loginForm .login-heading { margin: 0 0 28px; }
#loginForm .login-heading h2 { font-size: 26px; line-height: 1.3; }
#loginForm .login-heading p { margin: 8px 0 0; font-size: 14px; }
#loginForm .login-input-field { height: 52px !important; min-height: 52px !important; margin: 0 0 16px; padding-inline: 16px; }
#loginForm .login-input-field input { min-width: 0 !important; font-size: 16px; }
#loginForm .login-input-field:focus-within { border-color: var(--xy-text-soft); }
#loginForm .login-meta-row { margin: 4px 0 24px; gap: 12px; }
#loginForm .remember-login { min-height: 44px !important; }
#loginForm .login-actions { margin-top: 0; }
#loginForm .login-actions .primary { height: 52px !important; min-height: 52px !important; font-size: 16px; letter-spacing: 0; }
#loginForm .login-text-link { color: var(--xy-accent); white-space: nowrap; }

/* Ordinary task surfaces and selected rows use neutral boundaries. */
body .dispatch-page .dispatch-card,
body .dispatch-page .dispatch-card:hover {
  border: 0;
  border-radius: 8px;
  background: var(--xy-raised);
  box-shadow: none;
}
body .dispatch-page .dispatch-card { padding: 18px; }
body .dispatch-page .dispatch-request-grid > div,
body .dispatch-page .dispatch-link-row { border: 0; background: var(--xy-soft); border-radius: var(--xy-radius-sm); }
body .report-review-row.selected,
body .report-review-row.is-batch-selected {
  border-color: var(--xy-line-strong);
  background: var(--xy-soft);
  box-shadow: none;
}

/* Keep command labels intact; the long export command owns its mobile row. */
body .dispatch-card-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px; }
body .dispatch-card-actions button {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.report-review-item { display: flex; align-items: center; gap: 4px; min-width: 0; }
.report-review-item > .report-review-row { flex: 1 1 auto; min-width: 0; }
.report-review-select { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; min-height: 44px; cursor: pointer; }
.report-review-select input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--xy-accent); }
.report-review-batchbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 0; border-block: 1px solid var(--xy-line); }
.report-review-batchbar .batch-select-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 13px; }
.report-review-batchbar input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--xy-accent); }
.report-review-batchbar .batch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.report-review-batchbar button { white-space: nowrap; }
.report-review-batch-status { color: var(--xy-text-soft); font-size: 13px; }

@media (max-width: 760px) {
  #loginScreen:not(.hidden) { padding: 24px 16px; }
  #loginForm.login-card { width: 440px !important; padding: 32px 24px 28px; }
  #loginForm .login-brand { margin-bottom: 28px; }
  #loginForm .login-brand img { width: 56px !important; height: 56px !important; }
  #loginForm .login-brand h1 { font-size: 22px; }
  #loginForm .login-heading { margin-bottom: 24px; }
  body .dispatch-card-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .dispatch-card-actions button { width: 100% !important; min-width: 0 !important; min-height: 44px !important; }
  body .dispatch-card-actions .dispatch-export-action { grid-column: 1 / -1 !important; }
  .report-review-batchbar { gap: 8px 12px; }
  .report-review-batchbar .batch-actions { width: 100%; margin-left: 0; }
  .report-review-batchbar .batch-actions button { flex: 1 1 auto; min-height: 44px; }
  body .report-review-item > .report-review-row { gap: 8px; padding: 12px 10px; }
}
@media (max-width: 360px) {
  #loginForm.login-card { padding-inline: 20px; }
}

} /* end legacy-layer */

/* Dashboard layout moved to xy/05-pages.css (2026-10-06 Opus rollout). */