:root {
  --faaa-red: #c5250d;
  --faaa-blue: #0255a2;
  --faaa-green: #00885e;
  --faaa-ink: #002a6c;
  --faaa-soft: #f4f6fe;
  --black: #101114;
  --muted: #5e6676;
  --line: #d8deef;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(0, 42, 108, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--black);
  background: #f3f6fa;
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell { width: auto; min-height: 100vh; margin: 0 0 0 254px; padding: 30px clamp(24px, 4vw, 64px) 56px; }
.mobile-home-menu { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin: 16px 4px 4px; border: 1px solid #dce3ec; border-radius: 5px; padding: 0 12px; color: #17324e; background: #fff; font-size: .88rem; font-weight: 700; cursor: pointer; }
.mobile-home-menu > img { display: block; width: 18px; height: 18px; }
.mobile-nav-menu { display: flex; flex: 1; flex-direction: column; }
.sidebar-logo-link { display: block; width: fit-content; }

.site-brand { display: none; }

.site-brand img {
  display: block;
  width: 150px;
  height: auto;
}

[hidden] {
  display: none !important;
}

.page-header,
.form-header {
  margin-bottom: 24px;
  border-bottom: 1px solid #dce3ec;
  padding: 6px 0 20px;
}

.page-header h1,
.form-header h1 {
  margin-bottom: 8px;
  color: var(--faaa-ink);
  font-size: 1.9rem;
  line-height: 1.1;
}

.page-header p,
.form-header p {
  margin-bottom: 0;
  color: var(--muted);
}

.forms-menu {
  max-width: 1120px;
  margin: 0 auto;
}

.portal-sidebar { position: fixed; z-index: 5; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 254px; min-height: 100vh; border-right: 1px solid #dce3ec; padding: 25px 16px 18px; background: #fff; }
.sidebar-brand { display: grid; gap: 15px; border-bottom: 1px solid #e5eaf0; padding: 0 10px 23px; }
.sidebar-brand img { display: block; width: 136px; height: auto; }
.sidebar-brand span, .sidebar-label { color: #718096; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.sidebar-label { margin: 24px 10px 8px; }
.portal-nav { display: grid; gap: 3px; }
.portal-nav button { display: flex; align-items: center; min-height: 42px; border: 0; border-radius: 5px; padding: 0 12px; color: #465467; background: transparent; font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer; }
.portal-nav button:hover { color: var(--faaa-ink); background: #f1f5f9; }
.portal-nav button[aria-current="page"] { color: var(--faaa-ink); background: #eaf1f8; box-shadow: inset 3px 0 var(--faaa-blue); }
.sidebar-divider { height: 1px; margin: 16px 10px 0; background: #e5eaf0; }
.sidebar-footer { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: start; gap: 6px 9px; margin-top: auto; border-top: 1px solid #e5eaf0; padding: 17px 9px 0; color: #718096; font-size: .76rem; }
.sidebar-footer .portal-status-dot { margin-top: 4px; }
.sidebar-account-text { display: grid; gap: 5px; min-width: 0; }
.sidebar-account-text #portalNameText { overflow-wrap: anywhere; color: #43586d; font-weight: 600; }
.sidebar-signout { grid-column: 2; justify-self: start; border: 0; padding: 0; color: var(--faaa-blue); background: transparent; font-size: .76rem; font-weight: 700; cursor: pointer; }
#approvalLogout[hidden] { display: none; }
.portal-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faaa-green); }

.form-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.form-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  min-height: 220px;
  border: 1px solid #dce4eb;
  border-radius: 7px;
  padding: 22px;
  color: var(--black);
  background: linear-gradient(160deg, #fff 0%, #fff 62%, #f8fafb 100%);
  box-shadow: 0 2px 7px rgba(25, 48, 75, 0.035);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.form-link:hover,
.form-link:focus-visible {
  border-color: #8aafce;
  background: #fff;
  box-shadow: 0 9px 22px rgba(25, 48, 75, 0.09);
  transform: translateY(-2px);
  outline: none;
}

.form-link-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(17, 91, 166, .14);
  border-radius: 6px;
  color: var(--white);
  background: #087d5b;
  font-size: 1.25rem;
  font-weight: 800;
}

.reimbursement-icon {
  background: #115ba6;
}

.leave-icon {
  background: #c93527;
}

.form-link strong,
.form-link small {
  display: block;
}

.form-link strong {
  color: var(--faaa-ink);
  font-size: 1.1rem;
  line-height: 1.35;
}

.form-link small {
  max-width: 28ch;
  margin-top: 8px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

.form-link-arrow {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #dfe6ec;
  border-radius: 5px;
  color: var(--faaa-blue);
  font-size: 1.1rem;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.form-link:hover .form-link-arrow,
.form-link:focus-visible .form-link-arrow {
  border-color: #c7d8e7;
  background: #f1f6fa;
  transform: translate(1px, -1px);
}

.form-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
}

.back-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--faaa-ink);
  background: var(--white);
  font-size: 1.35rem;
  cursor: pointer;
}

.back-button:hover {
  border-color: var(--faaa-blue);
  background: var(--faaa-soft);
}

.masthead {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  color: var(--white);
  background: linear-gradient(135deg, var(--faaa-ink), var(--faaa-blue));
  border-radius: 8px;
  padding: 34px;
  box-shadow: var(--shadow);
}

.eyebrow,
.section-kicker {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 12px;
  font-size: clamp(2.2rem, 5vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  color: var(--faaa-ink);
  font-size: 1.3rem;
}

.intro {
  max-width: 700px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
  line-height: 1.55;
}

.status-card {
  flex: 0 0 170px;
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 150px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.status-card span {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

.status-card strong {
  font-size: 2.2rem;
  line-height: 1;
}

.status-card small {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

.pay-form {
  display: grid;
  gap: 18px;
}

.panel {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(0, 42, 108, 0.07);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.section-kicker {
  color: var(--faaa-red);
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.remember-option {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  cursor: pointer;
}

.full-width-grid {
  grid-column: 1 / -1;
}

.remember-option input[type="checkbox"] {
  appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  border: 1px solid #9aa9ca;
  border-radius: 4px;
  padding: 0;
  background: var(--white);
  cursor: pointer;
}

.remember-option input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) scale(0);
  transition: transform 120ms ease;
}

.remember-option input[type="checkbox"]:checked {
  border-color: var(--faaa-green);
  background: var(--faaa-green);
}

.remember-option input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1);
}

.remember-option span {
  color: var(--black);
  font-size: 0.9rem;
  font-weight: 600;
}

label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

label span {
  color: var(--faaa-ink);
  font-size: 0.86rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--black);
  background: var(--white);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

select {
  appearance: none;
  padding-right: 42px;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230255a2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  cursor: pointer;
}

select:hover {
  border-color: #9aa9ca;
  background-color: #fbfcff;
}

select option { color: #172b40; background: #fff; font-family: inherit; }
@supports (appearance: base-select) {
  select { appearance: base-select; background-image: none; }
  select::picker-icon { color: var(--faaa-blue); transition: rotate 150ms ease; }
  select:open::picker-icon { rotate: 180deg; }
  ::picker(select) { border: 1px solid #d6e0e9; border-radius: 6px; padding: 5px; background: #fff; box-shadow: 0 10px 28px rgba(25, 48, 75, .16); }
  select option { min-height: 40px; border-radius: 4px; padding: 9px 11px; color: #203b55; }
  select option:checked { color: var(--faaa-ink); background: #eaf1f8; font-weight: 700; }
  select option:hover { background: #f2f6fa; }
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--faaa-blue);
  box-shadow: 0 0 0 4px rgba(2, 85, 162, 0.14);
}

.date-control { position: relative; display: flex; min-width: 0; }
.date-control > input[name="lineDate"],
.date-control > input[name="expenseDate"],
.date-control > input[name="fromDate"],
.date-control > input[name="toDate"] { width: 100%; min-width: 0; padding-right: 48px; }
.date-picker-button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 38px; height: calc(100% - 8px); border: 0; border-radius: 4px; color: var(--faaa-blue); background: #f0f5fa; cursor: pointer; }
.date-picker-button:hover, .date-picker-button:focus-visible { background: #e4edf5; outline: 2px solid rgba(2, 85, 162, .22); }
.date-picker-button img { display: block; width: 20px; height: 20px; }
.date-picker-native { position: absolute; z-index: 1; top: 4px; right: 4px; width: 38px; height: calc(100% - 8px); opacity: 0; cursor: pointer; }
.date-picker-native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }

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

.pay-table {
  min-width: 980px;
}

.table-header,
.line-row {
  display: grid;
  grid-template-columns: 1.15fr 3fr 1fr 1.6fr 92px;
  gap: 10px;
  align-items: center;
}

.table-header {
  padding: 0 14px 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.line-items {
  display: grid;
  gap: 12px;
}

.line-items:empty::before {
  content: "No payment lines added yet.";
  display: grid;
  place-items: center;
  min-height: 96px;
  border: 1px dashed #b9c4df;
  border-radius: 8px;
  color: var(--muted);
  background: #fbfcff;
  font-weight: 600;
}

.reimbursement-items {
  display: grid;
  gap: 12px;
}

.reimbursement-items:empty::before {
  content: "No reimbursement claims added yet.";
  display: grid;
  place-items: center;
  min-height: 96px;
  border: 1px dashed #b9c4df;
  border-radius: 8px;
  color: var(--muted);
  background: #fbfcff;
  font-weight: 600;
}

.reimbursement-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 0.85fr 1.05fr 0.8fr 1.25fr 1.8fr 42px;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.file-field small {
  color: var(--muted);
  font-size: 0.75rem;
}

input[type="file"] {
  padding: 6px;
  background: var(--white);
}

input[type="file"]::file-selector-button {
  height: 32px;
  margin-right: 10px;
  border: 0;
  border-radius: 5px;
  padding: 0 12px;
  color: var(--faaa-blue);
  background: rgba(2, 85, 162, 0.1);
  font-weight: 800;
  cursor: pointer;
}

.remove-reimbursement {
  margin-top: 29px;
}

.other-description-field { grid-column: auto; }

.line-row {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.line-row input,
.line-row select,
.line-row .money-value {
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.25;
}

.line-row label span {
  display: none;
}

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 46px;
}

.money-value {
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--faaa-ink);
  background: var(--white);
  font-weight: 800;
}

.amount-value {
  color: var(--faaa-green);
  background: rgba(0, 136, 94, 0.08);
}

.icon-button,
.secondary-action,
.primary-action {
  border: 0;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--faaa-ink);
  background: var(--faaa-soft);
}
.icon-button svg { display: block; width: 19px; height: 19px; }

.icon-button:hover,
.secondary-action:hover,
.primary-action:hover {
  transform: translateY(-1px);
}

.duplicate-line:hover {
  color: var(--white);
  background: var(--faaa-blue);
}

.remove-line:hover {
  color: var(--white);
  background: var(--faaa-red);
}

.secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  color: var(--faaa-blue);
  background: rgba(2, 85, 162, 0.1);
}

.secondary-action span {
  font-size: 1.25rem;
  line-height: 1;
}

.primary-action {
  min-height: 48px;
  padding: 0 22px;
  color: var(--white);
  background: var(--faaa-green);
  box-shadow: 0 12px 24px rgba(0, 136, 94, 0.2);
}

.primary-action:hover {
  background: #007650;
}

.primary-action:disabled,
.secondary-action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.full-width {
  margin-bottom: 20px;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.signature-section {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.signature-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.signature-heading h3 {
  margin: 0 0 4px;
  color: var(--faaa-ink);
  font-size: 1rem;
}

.signature-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.signature-canvas {
  display: block;
  width: 100%;
  max-width: 700px;
  height: 180px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  cursor: crosshair;
  touch-action: none;
}

.signature-confirmation {
  margin: 0;
  color: var(--black);
  font-size: 0.9rem;
}

.form-message {
  margin: 0;
  color: var(--faaa-green);
  font-weight: 700;
}

.text-action {
  border: 0;
  padding: 8px 0;
  color: var(--faaa-blue);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.approval-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}

.approval-header p { margin: 0; color: var(--muted); }
.approval-header h1 { margin: 0 0 5px; }
.approval-login { max-width: 560px; margin: 34px auto; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: 0 12px 32px rgba(17, 45, 83, .07); }
.approval-login h2 { margin-top: 0; color: var(--faaa-ink); }
#approvalLoginMessage { min-height: 1.25em; color: var(--faaa-red); }
.approval-auth-loading { display: flex; align-items: center; gap: 16px; max-width: 560px; margin: 42px auto; border: 1px solid #dfe6ed; border-radius: 7px; padding: 24px; background: #fff; box-shadow: 0 4px 18px rgba(27, 47, 68, .05); }
.approval-auth-loading[hidden] { display: none; }
.approval-auth-loading .section-kicker { margin: 0 0 4px; }
.approval-auth-loading h2 { margin: 0; color: #17324e; font-size: 1.05rem; }
.approval-auth-loading p:last-child { margin: 5px 0 0; color: #687b8e; font-size: .86rem; }
.approval-spinner { width: 28px; height: 28px; flex: 0 0 auto; border: 3px solid #e2eaf1; border-top-color: var(--faaa-blue); border-radius: 50%; animation: approval-spin .8s linear infinite; }
@keyframes approval-spin { to { transform: rotate(360deg); } }
.approval-workspace { display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); gap: 28px; align-items: start; }
.approval-list-panel { min-width: 0; }
.approval-list-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.approval-list-heading h2 { margin: 0; color: var(--faaa-ink); font-size: 1.15rem; }
.approval-filters { display: flex; gap: 5px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.approval-filters button { min-height: 36px; border: 1px solid transparent; border-radius: 5px; padding: 0 11px; background: transparent; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.approval-filters button:hover { background: rgba(17, 91, 166, .07); color: var(--faaa-blue); }
.approval-filters button[aria-pressed="true"] { border-color: rgba(17, 91, 166, .18); background: rgba(17, 91, 166, .1); color: var(--faaa-blue); }
.approval-list { display: grid; gap: 8px; }
.approval-queue-skeleton { display: grid; gap: 9px; padding-top: 10px; }
.approval-queue-skeleton span { height: 82px; border: 1px solid #e6ebf0; border-radius: 5px; background: #f1f4f7; animation: approval-skeleton-pulse 1.2s ease-in-out infinite alternate; }
.approval-queue-skeleton span:nth-child(2) { animation-delay: .15s; }
.approval-queue-skeleton span:nth-child(3) { animation-delay: .3s; }
.approval-load-error { margin: 10px 0; border-left: 3px solid #ba3c31; padding: 10px 12px; color: #8f3029; background: #fff1ef; font-size: .86rem; }
@keyframes approval-skeleton-pulse { to { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  .approval-spinner, .approval-queue-skeleton span, .skeleton-line, .skeleton-block { animation: none; }
}
.approval-item { display: grid; gap: 5px; width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 14px; background: white; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.approval-item:hover, .approval-item:focus-visible { border-color: var(--faaa-blue); background: #f8fbff; outline: none; }
.approval-item[aria-current="true"] { border-color: var(--faaa-blue); box-shadow: inset 3px 0 var(--faaa-blue); }
.approval-item strong { color: var(--faaa-ink); }
.approval-item span, .approval-item small { color: var(--muted); }
.approval-detail { min-width: 0; min-height: 300px; border-left: 1px solid var(--line); padding-left: 28px; }
.approval-detail-skeleton { display: grid; align-content: start; gap: 13px; min-height: 320px; padding: 24px; }
.skeleton-line, .skeleton-block { display: block; border-radius: 4px; background: #e9eef3; animation: approval-skeleton-pulse 1.2s ease-in-out infinite alternate; }
.skeleton-line { width: 54%; height: 14px; }
.skeleton-line-short { width: 23%; height: 11px; }
.skeleton-line-title { width: 38%; height: 25px; }
.skeleton-block { width: 100%; height: 94px; margin-top: 8px; }
.skeleton-block-tall { height: 142px; }
.approval-detail:empty::before { content: "Select a submission to review its details."; display: block; padding: 24px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); text-align: center; }
.detail-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.detail-topline h2 { margin: 0 0 6px; color: var(--faaa-ink); }
.detail-topline p { margin: 0; color: var(--muted); }
.detail-topline .section-kicker { margin-bottom: 7px; text-transform: uppercase; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 8px 0 20px; }
.detail-field { min-width: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
.detail-field dt { margin-bottom: 5px; color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: capitalize; }
.detail-field dd { margin: 0; overflow-wrap: anywhere; }
.detail-field ul { margin: 0; padding-left: 18px; }
.claim-section { grid-column: 1 / -1; min-width: 0; margin: 4px 0 22px; }
.claim-section > h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: var(--faaa-ink); font-size: .98rem; }
.claim-section > h3 span { display: inline-grid; place-items: center; min-width: 23px; height: 23px; border-radius: 12px; padding: 0 6px; background: rgba(17, 91, 166, .1); color: var(--faaa-blue); font-size: .75rem; }
.claim-line-list { display: grid; gap: 9px; }
.claim-line { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: white; }
.claim-line > header { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; min-height: 42px; border-bottom: 1px solid var(--line); padding: 8px 14px; background: #f7f9fc; }
.claim-line > header strong { color: var(--faaa-ink); }
.claim-line > header time { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.claim-line > header span { color: var(--muted); font-size: .88rem; }
.claim-line > header .claim-code { margin-left: auto; border-radius: 4px; padding: 3px 7px; background: rgba(17, 91, 166, .1); color: var(--faaa-blue); font-size: .78rem; font-weight: 700; }
.claim-line dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .34fr) minmax(0, 1fr); gap: 0 20px; margin: 0; padding: 5px 14px; }
.claim-line dl > div { min-width: 0; padding: 10px 0; }
.claim-line dl > div + div { border-top: 0; }
.claim-line dt { margin-bottom: 3px; color: var(--muted); font-size: .73rem; font-weight: 700; text-transform: uppercase; }
.claim-line dd { margin: 0; overflow-wrap: anywhere; line-height: 1.4; }
.claim-line .claim-amount dd { color: #17324e; font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.claim-line .claim-line-notes { grid-column: auto; border-top: 0; }
.claim-total { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; border-top: 2px solid #dce5ed; padding: 13px 14px 4px; color: #334b62; font-size: .9rem; font-weight: 700; }
.claim-total strong { color: #087950; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.receipt-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; border-top: 1px solid var(--line); padding: 16px 0; }
.receipt-list h3 { flex-basis: 100%; margin: 0; color: var(--faaa-ink); font-size: 1rem; }
.receipt-list h3 { grid-column: 1 / -1; }
.receipt-link { display: inline-flex; align-items: center; min-height: 42px; color: var(--faaa-blue); }
.receipt-preview { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: white; }
.receipt-preview a { display: block; background: #f7f9fc; }
.receipt-preview img { display: block; width: 100%; max-height: 280px; object-fit: contain; }
.receipt-preview figcaption { padding: 9px 11px; color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.decision-panel { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.decision-panel h3 { margin: 0; color: var(--faaa-ink); }
.decision-actions { display: flex; justify-content: flex-end; gap: 10px; }
.danger-action { min-height: 46px; border: 1px solid var(--faaa-red); border-radius: 6px; padding: 0 18px; color: var(--faaa-red); background: white; font-weight: 800; cursor: pointer; }
.danger-action:disabled { opacity: .58; cursor: not-allowed; }
.approval-detail .secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid var(--line); border-radius: 5px; padding: 0 14px; color: var(--faaa-blue); background: white; font-weight: 700; text-decoration: none; }
.approval-detail .secondary-action:hover { border-color: var(--faaa-blue); background: #f8fbff; }
.empty-state { color: var(--muted); }
.audit-note { border-left: 3px solid var(--faaa-green); padding: 10px 12px; background: rgba(0, 136, 94, .08); color: var(--black); }
.audit-note p { margin: 0 0 7px; }
.audit-note .email-error { color: #9d2c24; font-size: .9rem; }
.audit-note .secondary-action { min-height: 34px; cursor: pointer; }
.audit-note .secondary-action:disabled { cursor: wait; opacity: .65; }

.approval-header .text-action { min-height: 40px; border-radius: 5px; padding: 0 14px; background: rgba(17, 91, 166, .09); }
.approval-header .text-action:hover { background: rgba(17, 91, 166, .15); }
.approval-login label { display: grid; gap: 7px; margin: 18px 0; color: var(--faaa-ink); font-weight: 700; }
.approval-login input { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 5px; padding: 0 12px; font: inherit; }
.approval-login .primary-action { min-height: 44px; border-radius: 5px; }
.manager-entry { margin-top: 14px; font-size: .86rem; }
.manager-login-form { margin-top: 16px; border-top: 1px solid #e4e9ef; padding-top: 14px; }
.manager-login-form h3 { margin: 0; color: #203b55; font-size: 1rem; }
.manager-login-form .form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.approval-signed-in { justify-self: end; color: #53677c; font-size: .82rem; }
.approval-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17, 34, 51, .48); }
.approval-modal[hidden] { display: none; }
.approval-modal-open { overflow: hidden; }
.approval-modal-panel { width: min(100%, 480px); border: 1px solid #dbe4eb; border-radius: 7px; padding: 26px; background: #fff; box-shadow: 0 20px 60px rgba(16, 35, 52, .22); }
.approval-modal-panel .section-kicker { margin: 0 0 7px; }
.approval-modal-panel h2 { margin: 0; color: #17324e; font-size: 1.3rem; }
.approval-modal-panel > p:not(.section-kicker) { margin: 10px 0 18px; color: #5c6f82; line-height: 1.5; }
.approval-progress-track { height: 8px; overflow: hidden; border-radius: 5px; background: #e7edf2; }
.approval-progress-track > span { display: block; width: 35%; height: 100%; border-radius: inherit; background: var(--faaa-blue); transition: width .3s ease; animation: approval-progress-pulse 1.1s ease-in-out infinite alternate; }
.approval-progress-track.approval-progress-complete > span { background: var(--faaa-green); animation: none; }
.approval-progress-track.approval-progress-failed > span { background: #b5473c; animation: none; }
@keyframes approval-progress-pulse { from { transform: translateX(-20%); } to { transform: translateX(180%); } }
.approval-modal-email { margin-top: 16px; border-radius: 5px; padding: 11px 13px; font-size: .9rem; line-height: 1.45; }
.approval-modal-email.email-sent { color: #176344; background: #eff8f4; }
.approval-modal-email.email-failed { color: #795414; background: #fff8e9; }
.approval-modal-actions { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 20px; }
.approval-modal-actions button { min-height: 42px; }
.approver-admin-workspace { max-width: 1000px; margin: 0 auto; padding: 24px; }
.approval-recipients-form { display: grid; gap: 16px; max-width: 760px; margin-top: 22px; }
.approval-recipients-form > label { display: grid; gap: 6px; color: #40556a; font-size: .84rem; font-weight: 700; }
.approval-recipients-form textarea { width: 100%; border: 1px solid #d5dee7; border-radius: 4px; padding: 10px; color: #172b40; font: inherit; resize: vertical; }
.approval-recipients-form small { color: #718096; font-size: .76rem; font-weight: 400; }
.admin-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e2e8ef; padding-bottom: 16px; }
.admin-heading h2 { margin: 0; color: #203b55; font-size: 1.25rem; }
.admin-heading .section-kicker { margin: 0 0 5px; }
.admin-heading > p { margin: 0; color: #687b8e; font-size: .85rem; }
.create-approver-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 14px; padding: 20px 0; }
.create-approver-form label, .approver-admin-row label { display: grid; gap: 6px; color: #40556a; font-size: .82rem; font-weight: 700; }
.create-approver-form input, .approver-admin-row input:not([type="checkbox"]) { width: 100%; min-width: 0; min-height: 42px; border: 1px solid #d5dee7; border-radius: 4px; padding: 0 10px; color: #172b40; background: #fff; font: inherit; }
.create-approver-form small { color: #718096; font-size: .72rem; font-weight: 400; }
.create-approver-form .primary-action { min-height: 42px; white-space: nowrap; }
#approverAdminMessage { min-height: 1.2em; margin: 0 0 10px; overflow-wrap: anywhere; }
.approver-admin-list { display: grid; }
.approver-admin-row { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(140px, 1fr) minmax(180px, 1.2fr) auto auto; align-items: end; gap: 12px; border-top: 1px solid #e6ebf0; padding: 15px 0; }
.approver-row-title { display: grid; align-self: center; gap: 4px; color: #263f57; font-size: .88rem; }
.approver-row-title span { font-size: .72rem; font-weight: 700; }
.approver-active { color: #16724e; }
.approver-inactive { color: #9b372f; }
.approver-admin-row .approver-enabled { display: flex; flex-direction: row; align-items: center; align-self: center; gap: 7px; white-space: nowrap; }
.approver-admin-row .approver-enabled input { accent-color: var(--faaa-blue); }
.approver-admin-row .secondary-action { min-height: 40px; white-space: nowrap; }
.approval-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.email-state { color: #738296; font-size: .69rem; font-weight: 700; }
.email-state-sent { color: #16724e; }
.email-state-failed { color: #a6342a; }
.delivery-status { display: grid; justify-items: start; gap: 4px; margin-top: 10px; border-top: 1px solid rgba(25, 130, 90, .2); padding: 9px 0 0; background: transparent; font-size: .82rem; }
.delivery-status > span { color: #52667a; overflow-wrap: anywhere; }
.delivery-status-sent { color: #176344; }
.delivery-status-failed { border-top-color: rgba(186, 60, 49, .24); color: #8f3029; }
.delivery-status-failed > span { color: #8f3029; }
.delivery-status .secondary-action { min-height: 34px; margin-top: 4px; cursor: pointer; }
.delivery-status .secondary-action:disabled { cursor: wait; opacity: .65; }
.approval-list-panel #refreshApprovals { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 5px; color: var(--faaa-blue); background: white; cursor: pointer; }
.approval-list-panel #refreshApprovals:hover { border-color: var(--faaa-blue); background: #f8fbff; }

.approval-header { margin-bottom: 18px; }
.approval-header { min-height: 58px; grid-template-columns: 1fr auto; border: 0; border-bottom: 1px solid #e2e8f0; padding: 0 0 14px; }
.approval-heading-brand { display: flex; align-items: center; gap: 11px; color: #17243b; }
.approval-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: #fff; background: #2864ed; font-size: 1.15rem; font-weight: 800; }
.approval-heading-brand > span:last-child { display: flex; align-items: center; gap: 17px; }
.approval-heading-brand strong { font-size: 1.2rem; }
.approval-heading-brand small { border-left: 1px solid #cbd5e1; padding-left: 17px; color: #64748b; font-size: .87rem; font-weight: 600; }
.approval-primary-tabs { display: flex; gap: 28px; border-bottom: 1px solid #e2e8f0; margin: -1px 0 24px; }
.approval-primary-tab { display: flex; align-items: center; gap: 9px; min-height: 48px; border: 0; border-bottom: 3px solid transparent; padding: 0 3px; color: #64748b; background: transparent; font-size: .9rem; font-weight: 700; cursor: pointer; }
.approval-primary-tab[aria-current="page"] { border-bottom-color: #2864ed; color: #2864ed; }
.approval-primary-tab span { display: grid; place-items: center; min-width: 21px; height: 21px; border-radius: 20px; padding: 0 6px; color: #2864ed; background: #dbeafe; font-size: .72rem; }
.approval-return { min-height: 38px; border: 1px solid #dce3ec; border-radius: 6px; padding: 0 13px; color: #53657b; background: #fff; cursor: pointer; }
/* Approvals dashboard layout modeled on the supplied reference. */
.app-shell.approval-mode { margin: 0; padding: 0; background: #f7f9fc; }
.approval-mode .site-brand { display: none !important; }
.approval-topbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #e1e7ef; padding: 0 28px; background: #fff; }
.approval-topbar-tools { display: flex; align-items: center; gap: 18px; }
.approval-search { display: flex; align-items: center; gap: 9px; width: min(300px, 28vw); min-height: 40px; border-radius: 24px; padding: 0 14px; color: #94a3b8; background: #f1f5f9; }
.approval-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #334155; background: transparent; font-size: .84rem; }
.approval-user { width: 38px; height: 38px; border: 0; border-radius: 50%; color: #2864ed; background: #e2edff; font-weight: 800; }
.approval-page-frame { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.approval-sidebar { display: flex; flex-direction: column; align-items: stretch; gap: 4px; border-right: 1px solid #e1e7ef; padding: 24px 16px; background: #fff; }
.approval-sidebar p { margin: 0; padding: 0 10px; color: #94a3b8; font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.approval-sidebar p:not(:first-child) { margin-top: 20px; }
.approval-side-item { display: flex; align-items: center; gap: 12px; min-height: 42px; border: 0; border-radius: 8px; padding: 0 12px; color: #526176; background: transparent; text-align: left; font-size: .86rem; font-weight: 600; cursor: pointer; }
.approval-side-item span { flex: 1; }
.approval-side-item b { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 20px; padding: 0 6px; color: #2864ed; background: #dbeafe; font-size: .72rem; }
.approval-side-item:hover, .approval-side-item.active { color: #2864ed; background: #eff5ff; }
.approval-main { min-width: 0; padding: 26px clamp(20px, 2.3vw, 42px) 40px; }
.approval-main > #approvalAuthLoading, .approval-main > #approvalLogin, .approval-main > #approverAdminWorkspace { max-width: 980px; margin-right: auto; margin-left: auto; }
.approval-page-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.approval-page-title p { margin: 0 0 8px; color: #718096; font-size: .84rem; }
.approval-page-title p span { padding: 0 8px; }
.approval-page-title h1 { margin: 0; color: #17243b; font-size: 1.65rem; line-height: 1.2; letter-spacing: -.03em; }
.approval-page-actions button { min-height: 40px; border: 1px solid #dce3ec; border-radius: 9px; padding: 0 14px; color: #526176; background: white; font-weight: 700; cursor: pointer; }
.approval-primary-tabs { gap: 10px; margin: 0 0 20px; border: 0; }
.approval-primary-tab { min-height: 40px; border: 0; border-radius: 9px; padding: 0 15px; background: #edf1f6; }
.approval-primary-tab[aria-current="page"] { color: #2864ed; background: #fff; box-shadow: 0 1px 5px rgba(20, 40, 70, .13); }
.approval-workspace { grid-template-columns: minmax(330px, .84fr) minmax(0, 1.25fr); gap: 20px; }
.approval-list-panel, .approval-detail { border-radius: 13px; }
.approval-list-panel { padding: 16px; }
.approval-detail { align-self: start; }
.approval-main > .send-email-workspace { max-width: 980px; margin: 0 auto; border: 1px solid #dce3ec; border-radius: 14px; padding: clamp(20px, 3vw, 34px); box-shadow: 0 3px 12px rgba(28, 46, 67, .045); }
.send-email-heading { margin-bottom: 28px; }
.send-email-heading .section-kicker, .team-email-preview-heading .section-kicker { margin: 0 0 7px; color: #718096; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.send-email-heading h1 { margin: 0; color: #17243b; font-size: 1.7rem; letter-spacing: -.035em; }
.send-email-heading > div > p:last-child { margin: 8px 0 0; color: #64748b; }
.team-email-form { display: grid; gap: 22px; }
.team-email-form > label { display: grid; gap: 8px; color: #334155; font-size: .9rem; font-weight: 700; }
.team-email-form input, .team-email-form textarea { width: 100%; min-height: 46px; border: 1px solid #d5deea; border-radius: 9px; padding: 11px 13px; color: #192b45; background: #fff; font: inherit; font-weight: 500; }
.team-email-form textarea { min-height: unset; resize: vertical; line-height: 1.5; }
.team-email-form input:focus, .team-email-form textarea:focus { outline: 3px solid rgba(40, 100, 237, .15); border-color: #2864ed; }
.team-email-form > label small { color: #718096; font-size: .78rem; font-weight: 500; line-height: 1.5; }
.team-email-firebase-recipients { min-width: 0; margin: 0; border: 1px solid #dce3ec; border-radius: 11px; padding: 14px 16px 16px; }
.team-email-firebase-recipients legend { padding: 0 6px; color: #334155; font-size: .9rem; font-weight: 700; }
.team-email-firebase-recipients > p { margin: 0 0 12px; color: #718096; font-size: .8rem; }
.team-email-recipient-options { display: flex; flex-wrap: wrap; gap: 8px; }
.team-email-recipient-options > label { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; border: 1px solid #dce3ec; border-radius: 8px; padding: 0 11px; color: #334155; background: #f8fafc; font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.team-email-recipient-options input { width: 16px; min-height: 16px; height: 16px; margin: 0; accent-color: #2864ed; }
.team-email-recipient-options .empty-state { margin: 0; color: #718096; font-size: .82rem; }
.team-email-preview-section { display: grid; gap: 12px; margin-top: 8px; padding-top: 22px; border-top: 1px solid #e3e9f1; }
.team-email-preview-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.team-email-preview-heading h2 { margin: 0; color: #17243b; font-size: 1.15rem; }
.team-email-preview-heading > p { max-width: 60%; margin: 0; color: #718096; font-size: .78rem; text-align: right; overflow-wrap: anywhere; }
.team-email-subject { display: flex; flex-wrap: wrap; gap: 10px; padding: 11px 14px; border: 1px solid #dce3ec; border-radius: 9px; color: #526176; background: #fff; font-size: .86rem; }
.team-email-subject strong { color: #334155; }
.team-email-preview { min-height: 220px; border: 1px solid #dce3ec; border-radius: 12px; padding: 16px; background: #f4f7fb; }
.team-email-preview > .empty-state { margin: 0; color: #718096; }
.team-email-preview > div { box-sizing: border-box; }
.team-email-send-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.team-email-send-footer .form-message { margin: 0; }
.team-email-send-footer button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) {
  .approval-page-frame { grid-template-columns: 1fr; }
  .approval-sidebar { display: none; }
  .approval-topbar { padding: 0 16px; }
  .approval-topbar-tools { gap: 8px; }
  .approval-search { width: 38vw; }
  .approval-main { padding: 20px 14px 30px; }
  .approval-page-title h1 { font-size: 1.35rem; }
}
.approval-workspace { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.approval-list-panel { position: static; max-height: none; overflow: visible; padding: 18px; box-shadow: 0 3px 12px rgba(28, 46, 67, .045); }
.approval-list-heading { align-items: flex-start; }
.approval-list-heading h2 { font-size: 1.02rem; }
.approval-list-heading p { margin: 5px 0 0; color: #728096; font-size: .78rem; }
.approval-list-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.approval-list-actions .secondary-action { min-height: 38px; border: 1px solid var(--line); padding: 0 11px; color: var(--faaa-blue); background: #fff; font-size: .82rem; }
.approval-export { margin: 12px 0 0; border: 1px solid #e0e6ee; border-radius: 5px; padding: 12px; background: #f8fafc; }
.approval-export form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 10px; }
.approval-export label { display: grid; min-width: 0; gap: 5px; color: #43586d; font-size: .78rem; font-weight: 700; }
.approval-export label > span { color: inherit; font-size: inherit; }
.approval-export .date-control > input[name="exportFromDate"], .approval-export .date-control > input[name="exportToDate"] { min-height: 40px; padding: 8px 44px 8px 10px; font-size: .84rem; }
.approval-export .date-picker-button { width: 32px; }
.approval-export .date-picker-native { width: 32px; }
.approval-export form > button { grid-column: 1 / -1; min-height: 40px; }
.approval-export-message, #approvalExportMessage { min-height: 1.2em; margin: 9px 0 0; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.approval-list { max-height: none; overflow: visible; padding: 10px 2px 2px 0; }
.approval-filters { gap: 4px; }
.approval-filters button { flex: 1; padding: 0 7px; font-size: .82rem; }
.approval-item { gap: 6px; border-color: #e4e9ef; padding: 12px; }
.approval-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.approval-item-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-item .approval-type { flex: 0 0 auto; border-radius: 3px; padding: 3px 6px; color: #4d6074; background: #eef2f6; font-size: .67rem; font-weight: 700; text-transform: uppercase; }
.approval-item .approval-item-summary { overflow: hidden; color: #44576a; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.approval-item small { font-size: .74rem; }
.approval-detail { display: flex; flex-direction: column; min-width: 0; max-height: none; overflow: visible; border: 1px solid #e0e6ee; border-radius: 6px; padding: 0; background: #fff; box-shadow: 0 3px 12px rgba(28, 46, 67, .045); }
.approval-detail:empty::before { margin: 24px; }
.detail-topline { position: static; z-index: auto; align-items: center; border-bottom: 1px solid #e6ebf0; padding: 20px 24px; background: #fff; }
.review-identity { min-width: 0; }
.review-title-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.review-status, .review-type { color: #607084; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.review-status { border-radius: 3px; padding: 4px 7px; background: #eef2f6; }
.review-status-pending, .review-status-processing { color: #87591c; background: #fff4df; }
.review-status-approved { color: #17714e; background: #e8f5ef; }
.review-status-rejected { color: #a6342a; background: #fbecea; }
.review-identity h2 { margin: 0 0 3px; color: #203b55; font-size: 1.28rem; }
.review-identity > a { color: #61758a; font-size: .84rem; text-decoration: none; }
.review-identity > a:hover { color: var(--faaa-blue); text-decoration: underline; }
.review-summary { margin: 8px 0 0 !important; color: #465a6e !important; font-size: .9rem; }
.approval-detail .pdf-action { flex: 0 0 auto; }
.review-content { min-width: 0; padding: 6px 24px 14px; }
.review-content .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 12px; gap: 0 24px; }
.review-content .claim-section { margin-top: 10px; }
.review-content .receipt-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.review-content .audit-note { margin: 12px 0 6px; }
.decision-panel { position: static; z-index: auto; gap: 11px; margin-top: 0; border: 0; border-top: 1px solid #e1e7ed; padding: 14px 24px 18px; background: #f9fbfc; box-shadow: none; }
.approval-workspace { grid-template-columns: minmax(300px, .78fr) minmax(0, 1.2fr); gap: 20px; }
.approval-list-panel, .approval-detail { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 2px 9px rgba(30, 55, 90, .035); }
.approval-list-panel { padding: 16px; }
.approval-detail { overflow: hidden; }
.approval-filters { border: 0; border-radius: 10px; padding: 5px; background: #f0f3f8; }
.approval-filters button { border-radius: 8px; }
.approval-filters button[aria-pressed="true"] { border-color: transparent; background: #fff; color: #2864ed; box-shadow: 0 1px 3px rgba(20, 40, 70, .12); }
.approval-item { border-radius: 9px; padding: 14px; }
.approval-item[aria-current="true"] { border-color: #d8e5ff; background: #f7faff; box-shadow: inset 3px 0 #2864ed; }
.approval-list-panel { padding: 0; overflow: hidden; }
.approval-list-heading { padding: 22px 24px 16px; }
.approval-list-heading h2 { color: #17243b; font-size: 1.25rem; }
.approval-list-heading p { color: #718096; font-size: .88rem; }
.approval-filters { justify-content: flex-start; gap: 4px; margin: 0; border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; border-radius: 0; padding: 16px 24px; background: #fbfcfe; }
.approval-filters button { flex: 0 0 auto; min-height: 56px; border-radius: 15px; padding: 0 20px; font-size: 1rem; }
.approval-list { gap: 0; padding: 0; }
.approval-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 18px; width: 100%; border: 0; border-bottom: 1px solid #e8edf4; border-radius: 0; padding: 22px 24px; color: #17243b; background: #fff; text-align: left; }
.approval-item:hover { background: #fbfdff; }
.approval-item[aria-current="true"] { border-color: #e8edf4; background: #fff; box-shadow: none; }
.approval-item-check { display: block; width: 32px; height: 32px; margin-top: 2px; border: 2px solid #858585; border-radius: 6px; }
.approval-item-content { display: grid; min-width: 0; gap: 0; }
.approval-item-heading { min-height: 35px; }
.approval-item-heading strong { color: #111a2f; font-size: 1.08rem; }
.approval-status-pill { flex: 0 0 auto; border-radius: 11px; padding: 7px 15px; font-size: .8rem; font-weight: 800; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.approval-status-approved { color: #08634b; background: #d1fae8; }
.approval-status-pending, .approval-status-processing { color: #9a4b08; background: #fff1c2; }
.approval-status-rejected { color: #b42318; background: #fee4e2; }
.approval-item .approval-item-summary { margin-top: 2px; color: #64748b; font-size: .94rem; white-space: normal; }
.approval-item-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 17px; border-top: 1px solid #e9eef5; padding-top: 13px; }
.approval-item-meta small, .approval-item .email-state { color: #90a0b8; font-size: .84rem; font-weight: 500; }
.approval-item .email-state { color: #64748b; }
.approval-item .email-state-sent { color: #079669; font-size: .92rem; }
.approval-item .email-state-failed { color: #b42318; }
/* Match the supplied Tailwind mock's compact queue rows and slate palette. */
.approval-mode { color: #1e293b; }
.approval-mode .approval-topbar, .approval-mode .approval-sidebar,
.approval-mode .approval-list-panel, .approval-mode .approval-detail { border-color: #e2e8f0; }
.approval-mode .approval-list-panel, .approval-mode .approval-detail { border-radius: 16px; }
.approval-mode .approval-list-heading { padding: 18px 18px 14px; }
.approval-mode .approval-list-heading h2 { color: #0f172a; font-size: 1.12rem; }
.approval-mode .approval-list-heading p { color: #718096; font-size: .86rem; }
.approval-mode .approval-filters { justify-content: flex-start; border-radius: 0; padding: 12px 16px; background: #f8fafc; }
.approval-mode .approval-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px 12px; }
.approval-mode .approval-filters button { width: 100%; min-height: 54px; border: 1px solid transparent; border-radius: 14px; padding: 0 12px; color: #475569; font-size: 1rem; }
.approval-mode .approval-filters button:hover { color: #1d4ed8; background: #fff; }
.approval-mode .approval-filters button[aria-pressed="true"] { border-color: #eef2f7; color: #1d4ed8; background: #fff; box-shadow: 0 2px 5px rgba(15, 23, 42, .12); }
.approval-mode .approval-item { grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 16px; }
.approval-mode .approval-item-check { width: 16px; height: 16px; margin-top: 2px; border: 1px solid #94a3b8; border-radius: 4px; }
.approval-mode .approval-item-heading { min-height: 22px; }
.approval-mode .approval-item-heading strong { color: #0f172a; font-size: .9rem; }
.approval-mode .approval-status-pill { border-radius: 6px; padding: 4px 8px; font-size: .64rem; letter-spacing: .05em; }
.approval-mode .approval-status-approved { color: #166534; background: #d1fae5; }
.approval-mode .approval-status-pending, .approval-mode .approval-status-processing { color: #92400e; background: #fef3c7; }
.approval-mode .approval-status-rejected { color: #9f1239; background: #ffe4e6; }
.approval-mode .approval-item .approval-item-summary { margin-top: 1px; color: #64748b; font-size: .78rem; }
.approval-mode .approval-item-meta { margin-top: 9px; padding-top: 8px; }
.approval-mode .approval-item-meta small, .approval-mode .approval-item .email-state { color: #94a3b8; font-size: .7rem; }
.approval-mode .approval-item .email-state-sent { color: #059669; font-size: .75rem; }
.approval-mode .approval-page-title h1 { color: #0f172a; }
.approval-mode .approval-page-title p { color: #64748b; }
.portal-topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; min-height: 68px; border-bottom: 1px solid #e2e8f0; padding: 0 28px; background: #fff; }
.portal-topbar-brand { display: flex; align-items: center; gap: 24px; color: inherit; text-decoration: none; }
.portal-topbar-brand img { display: block; width: 128px; height: auto; }
.portal-topbar-brand span { border-left: 1px solid #cbd5e1; padding-left: 24px; color: #64748b; font-size: .94rem; font-weight: 600; }
.portal-sidebar { inset: 68px auto 0 0; min-height: calc(100vh - 68px); padding-top: 24px; }
.sidebar-brand { display: none; }
.mobile-home-menu { display: none; }
.portal-nav button { justify-content: flex-start; border-radius: 10px; }
.portal-nav button b { display: grid; place-items: center; min-width: 22px; height: 22px; margin-left: auto; border-radius: 20px; padding: 0 6px; color: #1d4ed8; background: #dbeafe; font-size: .72rem; }
.portal-nav button b[hidden] { display: none; }
.app-shell.approval-mode { margin: 0 0 0 254px; padding: 24px clamp(20px, 2.5vw, 42px) 40px; background: #f7f9fc; }
.approval-mode .portal-sidebar { display: flex !important; }
.approval-page-frame { display: block; min-height: calc(100vh - 116px); }
.approval-main { padding: 0; }
.approval-main > #approvalAuthLoading, .approval-main > #approvalLogin, .approval-main > #approverAdminWorkspace { margin-top: 20px; }
@media (max-width: 620px) {
  .portal-topbar { min-height: 62px; padding: 0 16px; }
  .portal-topbar-brand { gap: 12px; }
  .portal-topbar-brand img { width: 102px; }
  .portal-topbar-brand span { padding-left: 12px; font-size: .72rem; }
  .portal-sidebar { inset: 62px 0 auto; width: 100%; height: 54px; min-height: 54px; flex-direction: row; align-items: center; justify-content: flex-end; border-right: 0; border-bottom: 1px solid #dce3ec; padding: 7px 16px; }
  .mobile-home-menu { display: inline-flex; min-height: 38px; margin: 0; }
  .app-shell.approval-mode { margin: 0; padding: 84px 14px 30px; }
}
.approval-mode .approval-detail { border-radius: 16px; }
.approval-mode .detail-topline { align-items: center; gap: 20px; border-bottom-color: #e2e8f0; padding: 24px; background: #f8fafc; }
.approval-mode .review-title-row { gap: 8px; margin-bottom: 12px; }
.approval-mode .review-status { border-radius: 6px; padding: 6px 10px; font-size: .75rem; letter-spacing: .05em; }
.approval-mode .review-type { border-radius: 6px; padding: 6px 10px; color: #475569; background: #e2e8f0; font-size: .75rem; letter-spacing: .04em; }
.approval-mode .review-identity h2 { margin-bottom: 4px; color: #17243b; font-size: 1.55rem; }
.approval-mode .review-identity > a { color: #64748b; font-size: .94rem; }
.approval-mode .review-summary { margin-top: 8px !important; color: #475569 !important; font-size: .95rem; }
.approval-mode .approval-detail .pdf-action { min-height: 44px; border-color: #cbd5e1; border-radius: 9px; padding: 0 15px; color: #0759a7; font-size: .88rem; }
.pdf-button-icon { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor; mask: url("pdf-panels.svg") center / contain no-repeat; -webkit-mask: url("pdf-panels.svg") center / contain no-repeat; }
.pdf-action, .success-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.approval-mode .review-content { padding: 20px 24px 24px; }
.approval-mode .audit-note { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; border: 1px solid #a7f3d0; border-radius: 22px; padding: 18px 24px; color: #064e3b; background: #ecfdf5; }
.approval-mode .audit-check { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #059669; font-size: 1.45rem; font-weight: 700; }
.approval-mode .audit-note-copy { min-width: 0; }
.approval-mode .audit-note-copy > p:first-child { margin: 0 0 4px; color: #064e3b; font-size: .98rem; font-weight: 700; }
.approval-mode .delivery-status { display: block; margin: 0; color: #047857; font-size: .9rem; line-height: 1.5; white-space: nowrap; }
.approval-mode .delivery-status a { color: inherit; text-decoration: underline; }
.approval-mode .review-comments { margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; padding: 0 0 15px; }
.approval-mode .review-comments h3 { margin: 0 0 7px; color: #64748b; font-size: .85rem; font-weight: 700; }
.approval-mode .review-comments p { margin: 0; color: #334155; font-size: .88rem; }
.approval-mode .review-comments p:where(:not(:empty)) { min-height: 1.2em; }
.approval-mode .claim-section { margin: 16px 0 0; }
.approval-mode .claim-section > h3 { margin-bottom: 12px; color: #0b3675; font-size: 1.05rem; }
.approval-mode .claim-section > h3 span { min-width: 30px; height: 30px; border-radius: 50%; color: #0759a7; background: #e7eef8; font-size: .83rem; }
.approval-mode .claim-line { border-color: #dbe3ed; border-radius: 10px; background: #fff; }
.approval-mode .claim-line > header { min-height: 48px; border-bottom-color: #dbe3ed; padding: 9px 14px; background: #f8fafc; }
.approval-mode .claim-line > header strong { color: #0b3675; font-size: .92rem; }
.approval-mode .claim-line > header time { color: #64748b; }
.approval-mode .claim-line > header time { font-weight: 700; }
.approval-mode .claim-line > header .claim-code { border-radius: 6px; color: #0759a7; background: #e2ebf8; }
.approval-mode .claim-line dl { padding: 8px 14px; }
.approval-mode .claim-line dl { grid-template-columns: minmax(0, 1fr) minmax(140px, .42fr); gap: 0 24px; }
.approval-mode .claim-line .claim-amount { justify-self: end; width: 100%; }
.approval-mode .claim-line .claim-amount dt, .approval-mode .claim-line .claim-amount dd { text-align: right; }
.approval-mode .claim-line dt { color: #64748b; font-size: .72rem; }
.approval-mode .claim-line .claim-amount dd { color: #17324e; font-size: 1.1rem; }
.approval-mode .claim-line-row { overflow: hidden; border-color: #dbe3ed; border-radius: 10px; }
.approval-mode .claim-line-grid { display: grid; grid-template-columns: minmax(72px, .65fr) minmax(105px, .95fr) minmax(62px, .45fr) minmax(0, 2.5fr) minmax(100px, .8fr); align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; }
.approval-mode .claim-line-grid > * { min-width: 0; margin: 0; }
.approval-mode .claim-line-grid .claim-row-number { color: #0b3675; font-size: .95rem; white-space: nowrap; }
.approval-mode .claim-line-grid time { color: #64748b; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.approval-mode .claim-line-grid .claim-code { justify-self: start; max-width: 100%; margin: 0; border-radius: 6px; padding: 4px 8px; color: #0759a7; background: #e2ebf8; font-size: .75rem; font-weight: 700; overflow-wrap: anywhere; }
.approval-mode .claim-row-description > span, .approval-mode .claim-row-amount > span { display: block; margin-bottom: 3px; color: #64748b; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.approval-mode .claim-row-description p { margin: 0; color: #24344c; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.approval-mode .claim-row-amount { justify-self: end; text-align: right; white-space: nowrap; }
.approval-mode .claim-row-amount strong { color: #17324e; font-size: 1rem; font-variant-numeric: tabular-nums; }
.approval-mode .claim-line-notes { margin: 0; border-top: 1px solid #e2e8f0; padding: 8px 16px; color: #475569; font-size: .82rem; }
.approval-mode .claim-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.approval-mode .claim-total { margin-top: 12px; border-top: 2px solid #dbe3ed; padding: 14px 12px 2px; color: #334b62; }
.approval-mode .claim-total strong { color: #087950; font-size: 1.35rem; }
.approval-mode .detail-grid > .detail-field { color: #334155; }
@media (max-width: 620px) {
  .approval-mode .detail-topline, .approval-mode .review-content { padding-right: 16px; padding-left: 16px; }
  .approval-mode .claim-line dl { grid-template-columns: 1fr; }
  .approval-mode .audit-note { align-items: flex-start; gap: 10px; padding: 14px; }
  .approval-mode .delivery-status { white-space: normal; }
  .approval-mode .claim-line-grid { grid-template-columns: minmax(70px, auto) minmax(0, 1fr) minmax(80px, auto); gap: 9px 12px; }
  .approval-mode .claim-row-number { grid-column: 1; grid-row: 1; }
  .approval-mode .claim-line-grid time { grid-column: 2; grid-row: 1; }
  .approval-mode .claim-line-grid .claim-code { grid-column: 3; grid-row: 1; justify-self: end; }
  .approval-mode .claim-row-description { grid-column: 1 / 3; }
  .approval-mode .claim-row-amount { grid-column: 3; }
}
.detail-topline { padding: 20px 22px; }
.review-identity h2 { color: #17243b; }
.decision-panel { background: #f8fafc; }
@media (max-width: 680px) {
  .approval-heading-brand > span:last-child { align-items: flex-start; flex-direction: column; gap: 2px; }
  .approval-heading-brand small { border: 0; padding: 0; font-size: .72rem; }
  .approval-primary-tabs { gap: 18px; }
}
.decision-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.decision-heading .section-kicker { margin: 0 0 3px; }
.decision-heading h3 { color: #203b55; font-size: .98rem; }
.decision-heading > span { color: #78889a; font-size: .75rem; }
.decision-panel label { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; }
.decision-panel label > span { color: #485d72; font-size: .8rem; font-weight: 700; }
.decision-panel input { min-height: 40px; background: #fff; }
.decision-panel .signature-section { grid-template-columns: 140px minmax(0, 1fr); align-items: start; gap: 8px 12px; margin: 0; border: 0; padding: 0; }
.decision-panel .signature-heading { display: contents; }
.decision-panel .signature-heading > div { grid-column: 1; grid-row: 1; }
.decision-panel .signature-heading h3 { font-size: .8rem; }
.decision-panel .signature-heading p { display: none; }
.decision-panel .signature-heading .clear-signature { grid-column: 2; grid-row: 1; justify-self: end; min-height: 30px; padding: 0 9px; font-size: .76rem; }
.decision-panel .signature-canvas { grid-column: 1 / -1; max-width: none; height: 94px; }
.decision-actions { justify-content: flex-end; }
.decision-actions .primary-action, .decision-actions .danger-action { min-height: 40px; }
.decision-panel .form-message { margin: 0; font-size: .8rem; }
.decision-panel .signature-section { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.decision-panel .signature-heading { display: flex; grid-column: 1; align-items: center; justify-content: space-between; }
.decision-panel .signature-heading > div { grid-column: auto; grid-row: auto; }
.decision-panel .signature-heading .clear-signature, .decision-panel .signature-heading .request-phone-signature { grid-column: auto; grid-row: auto; justify-self: auto; min-height: 32px; padding: 0 10px; }
.decision-panel .signature-canvas, .decision-panel .signature-pair-panel { grid-column: 1; }
.signature-pair-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; border: 1px solid #e1e7ed; border-radius: 5px; padding: 10px; background: #fff; }
.signature-pair-panel[hidden] { display: none; }
.signature-qr-slot { display: grid; grid-row: span 2; width: 132px; height: 132px; place-items: center; }
.signature-pair-panel img { grid-area: 1 / 1; width: 132px; height: 132px; image-rendering: pixelated; }
.signature-qr-loading { grid-area: 1 / 1; }
.signature-pair-panel img[hidden], .signature-qr-loading[hidden] { display: none; }
.signature-pair-panel p { margin: 0; color: #43586d; font-size: .82rem; }
.signature-pair-panel .text-action { justify-self: start; }
.phone-signing { background: #f3f6fa; }
.phone-signing .app-shell { display: block; }
.phone-signing .portal-sidebar { display: none; }
.phone-signing .app-shell > :not(#phoneSignatureView):not(.site-brand) { display: none !important; }
.phone-signing .app-shell { width: 100%; max-width: 620px; min-height: 100vh; margin: 0 auto; padding: 22px 16px; }
.phone-signature-view:not([hidden]) { display: grid; min-height: calc(100vh - 44px); place-items: center; }
.phone-signature-panel { width: 100%; border: 1px solid #dfe6ed; border-radius: 7px; padding: 24px; background: #fff; box-shadow: 0 8px 24px rgba(25, 45, 65, .06); }
.phone-signature-panel > img { display: block; width: 112px; height: auto; margin-bottom: 20px; }
.phone-signature-panel .section-kicker { margin: 0 0 7px; }
.phone-signature-panel h1 { margin: 0; color: #17324e; font-size: 1.5rem; }
.phone-signature-panel > p:not(.section-kicker) { margin: 9px 0 20px; color: #63758a; line-height: 1.45; }
.phone-signature-panel [data-signature="phone"] { display: grid; gap: 10px; }
.phone-signature-panel [data-signature="phone"] .signature-heading { align-items: center; }
.phone-signature-panel [data-signature="phone"] .signature-canvas { max-width: none; height: 190px; }
.phone-signature-panel #phoneSignatureMessage { min-height: 1.25em; margin: 12px 0; }
.phone-signature-panel #submitPhoneSignature { width: 100%; min-height: 48px; }
.phone-signature-panel #scanAnotherSignature { width: 100%; min-height: 48px; margin-top: 12px; justify-content: center; }
.phone-qr-scanner { display: grid; gap: 12px; margin-top: 16px; }
.phone-qr-scanner[hidden] { display: none; }
.phone-qr-scanner #phoneQrReader { width: 100%; overflow: hidden; border: 1px solid #dce3ec; border-radius: 6px; background: #111; }
.phone-qr-scanner #phoneQrReader video { display: block; width: 100%; max-height: 60vh; object-fit: cover; }
.phone-qr-scanner p { min-height: 1.3em; margin: 0; color: #63758a; font-size: .88rem; }
.phone-qr-scanner button { justify-content: center; }
.queue-empty { display: grid; gap: 6px; padding: 28px 12px; color: #334b62; text-align: center; }
.queue-empty span { color: #77879a; font-size: .82rem; }
.review-audit-only { padding-top: 18px; }

.panel { border: 1px solid #e0e6ee; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(31, 48, 68, .035); }
.section-kicker { color: #748196; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.section-heading h2 { color: #17324e; font-size: 1.18rem; }
.page-header h1, .form-header h1 { color: #17324e; font-size: 1.75rem; }
.form-header { grid-template-columns: auto 1fr auto; }
.approval-header { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.form-header > div { min-width: 0; }
.approval-header { border-bottom-color: #dce3ec; }
.approval-workspace { gap: 24px; }
.approval-list-panel { overflow: visible; border: 1px solid #e0e6ee; border-radius: 6px; padding: 16px; background: #fff; }
.approval-detail { border-left: 1px solid #dce3ec; }
.approval-item { border-color: #e1e7ee; border-radius: 5px; }
.approval-item[aria-current="true"] { border-color: #a9c6df; background: #f5f9fc; box-shadow: inset 3px 0 var(--faaa-blue); }
.claim-line { border-color: #e1e7ee; border-radius: 5px; }
.decision-panel { gap: 16px; }
.submission-success { max-width: 620px; margin: min(10vh, 100px) auto 0; border: 1px solid #dfe7ee; border-radius: 7px; padding: 44px clamp(24px, 6vw, 56px); background: #fff; box-shadow: 0 12px 34px rgba(24, 46, 70, .08); text-align: center; }
.success-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 22px; border: 1px solid #bfe0d3; border-radius: 50%; color: var(--faaa-green); background: #eff8f4; font-size: 1.6rem; font-weight: 700; }
.submission-success .section-kicker { margin: 0 0 9px; }
.submission-success h1 { margin: 0; color: #17324e; font-size: 1.8rem; }
.success-copy { margin: 12px 0 26px; color: #607084; }
.success-reference { display: grid; gap: 6px; margin: 0 auto 24px; border: 1px solid #e2e8ef; border-radius: 5px; padding: 13px 16px; background: #f7f9fb; }
.success-reference span { color: #718096; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.success-reference strong { color: #17324e; font-size: 1.2rem; letter-spacing: .04em; }
.success-download { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-bottom: 10px; border-radius: 5px; text-decoration: none; }
.submission-success > .secondary-action { min-height: 40px; border: 1px solid #d9e1e9; border-radius: 5px; padding: 0 16px; color: #3d5268; background: #fff; font-weight: 700; cursor: pointer; }
.submission-success > .secondary-action:hover { background: #f5f8fa; }

@media (max-width: 900px) {
  .app-shell { margin-left: 220px; padding-right: 26px; padding-left: 26px; }
  .portal-sidebar { width: 220px; }
  .reimbursement-row { grid-template-columns: repeat(3, minmax(0, 1fr)) 42px; }
  .reimbursement-row > .other-description-field { grid-column: span 2; }
  .reimbursement-row > .file-field { grid-column: span 2; }
  .remove-reimbursement { grid-column: 4; grid-row: 1; }
  .approval-workspace { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 18px; }
  .approval-detail { max-height: none; overflow: visible; }
  .form-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-link { min-height: 200px; }
  .decision-panel { padding-right: 16px; padding-left: 16px; }
  .approver-admin-row { grid-template-columns: 1fr 1fr; }
  .approver-row-title { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .section-heading,
  .form-footer {
    flex-direction: column;
    align-items: stretch;
  }

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

  .status-card {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .app-shell {
    width: auto;
    margin: 0;
    padding: 84px 16px 28px;
  }

  .portal-sidebar { inset: 0 0 auto; width: 100%; min-height: auto; height: 68px; flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid #dce3ec; padding: 8px 16px; }
  .sidebar-brand { display: block; border: 0; padding: 0; }
  .sidebar-brand img { width: 112px; }
  .sidebar-brand span, .sidebar-label, .sidebar-divider, .sidebar-footer { display: none; }
  .mobile-home-menu { margin: 0; }
  .mobile-nav-menu { display: none; position: absolute; top: 67px; right: 12px; left: 12px; padding: 10px; border: 1px solid #dce3ec; border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgba(25,45,65,.14); }
  .mobile-nav-menu.mobile-nav-open { display: flex; }
  .mobile-nav-menu .portal-nav { display: grid; gap: 4px; margin: 0; }
  .mobile-nav-menu .portal-nav button { min-height: 44px; padding: 0 12px; }
  .mobile-nav-menu .portal-nav + .portal-nav { margin-top: 5px; padding-top: 5px; border-top: 1px solid #e5eaf0; }
  .mobile-nav-menu .sidebar-label { display: block; margin: 5px 10px 7px; }
  .mobile-nav-menu.mobile-nav-open .sidebar-footer { display: grid; margin-top: 12px; border-top: 1px solid #e5eaf0; padding: 12px 8px 2px; }
  .mobile-home-menu { display: inline-flex; }
  .submission-success { margin-top: 20px; padding: 32px 22px; }
  .form-header { grid-template-columns: auto 1fr auto; gap: 10px; }
  .form-list { grid-template-columns: 1fr; gap: 10px; }
  .form-link { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 16px; }
  .form-link-icon { flex: 0 0 42px; width: 42px; height: 42px; }
  .form-link-copy { min-width: 0; padding-right: 24px; }
  .form-link strong { font-size: 1rem; }
  .form-link small { margin-top: 4px; font-size: .82rem; }
  .form-link-arrow { right: 12px; bottom: auto; width: 28px; height: 28px; }

  .site-brand {
    margin-bottom: 18px;
  }

  .site-brand img {
    width: 120px;
  }

  .masthead,
  .panel {
    padding: 20px;
  }

  .details-grid {
    grid-template-columns: 1fr;
  }

  .form-header {
    grid-template-columns: auto 1fr;
  }

  .pay-table {
    min-width: 0;
  }

  .table-header {
    display: none;
  }

  .line-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .reimbursement-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .line-row > label,
  .reimbursement-row > label { min-width: 0; }

  .line-row input[name="lineDate"],
  .reimbursement-row input[name="expenseDate"],
  input[name="fromDate"],
  input[name="toDate"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
  }

  .reimbursement-row > .other-description-field,
  .reimbursement-row > .file-field { grid-column: auto; }

  .remove-reimbursement {
    margin-top: 0;
  }

  .approval-workspace { grid-template-columns: 1fr; }
  .approval-list-heading { align-items: center; }
  .approval-list-actions .secondary-action { min-height: 36px; padding: 0 9px; font-size: .76rem; }
  .approval-export form { grid-template-columns: minmax(0, 1fr); }
  .approval-export form > button { grid-column: auto; }
  .approver-admin-workspace { padding: 18px; }
  .admin-heading { align-items: flex-start; flex-direction: column; }
  .create-approver-form { grid-template-columns: 1fr; }
  .approver-admin-row { grid-template-columns: 1fr; }
  .approver-row-title { grid-column: auto; }
  .approval-signed-in { display: none; }
  .approval-list-panel { position: static; max-height: none; overflow: visible; }
  .approval-list { max-height: none; overflow: visible; }
  .approval-detail { max-height: none; overflow: visible; border: 1px solid #e0e6ee; padding: 0; }
  .detail-topline { position: static; flex-direction: column; align-items: stretch; padding: 16px; }
  .review-content { padding: 4px 16px 12px; }
  .decision-panel { position: static; }
  .decision-panel label { grid-template-columns: 1fr; gap: 6px; }
  .decision-panel .signature-section { grid-template-columns: 1fr auto; }
  .decision-panel .signature-canvas { grid-column: 1 / -1; }
  .detail-grid { grid-template-columns: 1fr; }
  .claim-line dl { grid-template-columns: minmax(0, 1fr) minmax(96px, .42fr); gap: 0 12px; padding-right: 12px; padding-left: 12px; }
  .claim-line .claim-line-notes { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .claim-line > header { gap: 7px 10px; padding-right: 12px; padding-left: 12px; }
  .claim-line > header .claim-code { max-width: 100%; overflow-wrap: anywhere; text-align: right; }
  .claim-total { padding-right: 12px; padding-left: 12px; }
  .detail-topline { flex-direction: column; }
  .decision-actions { flex-direction: column-reverse; }

  .line-row label span {
    display: block;
  }

  .money-value::before {
    margin-right: 8px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
  }

  .rate-value::before {
    content: "Rate";
  }

  .row-actions {
    justify-content: flex-start;
  }
}

/* Dedicated manager entry and login. */
.portal-nav a { display: block; padding: 12px 14px; color: inherit; text-decoration: none; border-radius: 10px; font-weight: 600; }
.portal-nav a:hover, .portal-nav a[aria-current="page"] { background: #eaf1f8; color: #203b55; }
#managerAccess .manager-login-form { margin-top: 20px; border-top: 0; padding-top: 0; }

/* Read reimbursement files in the review page. */
.receipt-pdf { display: block; width: 100%; height: 620px; border: 0; background: #f7f9fc; }
.receipt-list, .review-content .receipt-list { grid-template-columns: minmax(0, 1fr); }
.receipt-preview img { max-height: 680px; }
.reimbursement-document { margin-top: 20px; min-width: 0; }
.reimbursement-document > .receipt-pdf { border: 1px solid var(--line); border-radius: 6px; }
@media (max-width: 600px) { .receipt-pdf { height: 480px; } }

.receipt-scan-status { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.receipt-scan-status:empty { display: none; }

.receipt-scan-progress { grid-column: 1 / -1; width: 100%; height: 8px; accent-color: #0255a2; }
.receipt-scan-progress[hidden] { display: none; }