/* ============================================================
   Villa Plumbing Field Portal — Portal Simplicity Redlines
   Additive layer that implements the remaining redline items
   from the Portal Simplicity Audit. Built ON TOP of the existing
   visual identity (teal/navy/Barlow, .badge pill look, modal
   tokens). Does NOT modify the existing dashboard markup, nav,
   cards, typography, or colors.
   ============================================================ */

:root {
  --psr-red: #c44a3d;
  --psr-red-bg: #fdecea;
  --psr-yellow: #b07700;
  --psr-yellow-bg: #fff4dc;
  --psr-green: #FF6B00;
  --psr-green-bg: #eaf6f4;
}

/* ---------- Needs Action Today panel (items 2 + 3) ---------- */
.psr-nat-wrap {
  background: #fff;
  border: 1px solid var(--bd-lt, #dde8e7);
  border-radius: 14px;
  padding: 14px 16px 12px;
  margin: 0 0 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.psr-nat-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.psr-nat-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--navy, #1a3a72);
  text-transform: uppercase; letter-spacing: .5px;
  display: flex; align-items: center; gap: 8px;
}
.psr-nat-count {
  background: var(--psr-red);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: .3px;
}
.psr-nat-count.ok { background: var(--psr-green); }
.psr-nat-toggles {
  display: flex; gap: 6px; align-items: center; font-size: 11px;
}
.psr-nat-toggle {
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--bd, #cdd9d8);
  background: #fff; color: var(--tx, #2c3e3c);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  cursor: pointer;
}
.psr-nat-toggle.active.red    { background: var(--psr-red-bg); color: var(--psr-red); border-color: var(--psr-red); }
.psr-nat-toggle.active.yellow { background: var(--psr-yellow-bg); color: var(--psr-yellow); border-color: #f0d68c; }
.psr-nat-toggle.active.green  { background: var(--psr-green-bg); color: var(--psr-green); border-color: var(--psr-green); }

.psr-nat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.psr-nat-card {
  border: 1px solid var(--bd-lt, #dde8e7);
  border-left: 4px solid var(--psr-green);
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff;
  display: flex; flex-direction: column; gap: 6px;
}
.psr-nat-card.priority-red    { border-left-color: var(--psr-red); }
.psr-nat-card.priority-yellow { border-left-color: var(--psr-yellow); }
.psr-nat-card.priority-green  { border-left-color: var(--psr-green); }
.psr-nat-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
}
.psr-nat-card-tag {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .3px;
}
.psr-nat-card.priority-red .psr-nat-card-tag    { background: var(--psr-red-bg); color: var(--psr-red); }
.psr-nat-card.priority-yellow .psr-nat-card-tag { background: var(--psr-yellow-bg); color: var(--psr-yellow); }
.psr-nat-card.priority-green .psr-nat-card-tag  { background: var(--psr-green-bg); color: var(--psr-green); }
.psr-nat-card-title {
  font-weight: 600; font-size: 13px; color: var(--navy, #1a3a72);
  line-height: 1.25;
}
.psr-nat-card-sub  { font-size: 11px; color: var(--tx-lt, #6b7e7c); }
.psr-nat-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.psr-nat-action {
  background: var(--teal, #FF6B00); color: #fff;
  border: none; border-radius: 7px;
  font-size: 11px; font-weight: 700;
  padding: 5px 10px; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .3px; text-transform: uppercase;
}
.psr-nat-action.ghost {
  background: #fff; color: var(--navy, #1a3a72);
  border: 1px solid var(--bd, #cdd9d8);
}
.psr-nat-empty {
  text-align: center; padding: 18px 8px;
  color: var(--tx-lt, #6b7e7c); font-size: 13px;
}

/* ---------- Mode toggle pills (item 1) ---------- */
.psr-mode-bar {
  display: inline-flex; gap: 6px; align-items: center;
  border: 1px solid var(--bd, #cdd9d8); border-radius: 999px;
  padding: 3px; background: #fff;
}
.psr-mode-pill {
  border: 0; background: transparent;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  color: var(--tx, #2c3e3c);
}
.psr-mode-pill.active {
  background: var(--teal, #FF6B00); color: #fff;
}
.psr-mode-pill.locked {
  opacity: .55; cursor: not-allowed;
}

/* ---------- Permissions matrix (item 1) ---------- */
.psr-perm-modal {
  position: fixed; inset: 0; background: rgba(15,28,40,.45);
  z-index: 9000; display: none; align-items: center; justify-content: center;
}
.psr-perm-modal.open { display: flex; }
.psr-perm-card {
  background: #fff; border-radius: 14px; padding: 18px 18px 14px;
  width: min(880px, 92vw); max-height: 86vh; overflow: auto;
  border: 1px solid var(--bd-lt, #dde8e7);
}
.psr-perm-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.psr-perm-hd h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; color: var(--navy, #1a3a72);
  margin: 0; text-transform: uppercase; letter-spacing: .3px;
}
.psr-perm-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
  border-bottom: 1px solid var(--bd-lt, #dde8e7);
}
.psr-perm-tab {
  background: none; border: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 12px; color: var(--tx, #2c3e3c);
  padding: 6px 10px; cursor: pointer; text-transform: uppercase;
  letter-spacing: .3px; border-bottom: 2px solid transparent;
}
.psr-perm-tab.active { color: var(--teal-dk, #1f6f63); border-bottom-color: var(--teal, #FF6B00); }
.psr-perm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.psr-perm-table th, .psr-perm-table td {
  padding: 7px 9px; text-align: left;
  border-bottom: 1px solid var(--bd-lt, #dde8e7);
}
.psr-perm-table th {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase; letter-spacing: .3px;
  background: #f5faf9; font-size: 11px; color: var(--navy, #1a3a72);
}
.psr-perm-table td.mod { font-weight: 700; color: var(--navy, #1a3a72); }
.psr-perm-cell { display: flex; gap: 4px; align-items: center; }
.psr-perm-mini {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border: 1.5px solid var(--bd, #cdd9d8);
  border-radius: 4px; cursor: pointer; background: #fff;
  position: relative;
}
.psr-perm-mini:checked { background: var(--teal, #FF6B00); border-color: var(--teal, #FF6B00); }
.psr-perm-mini:checked::after {
  content: ''; position: absolute; left: 3px; top: 0px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.psr-perm-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--bd-lt, #dde8e7);
}
.psr-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .3px;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--bd, #cdd9d8); background: #fff;
  color: var(--navy, #1a3a72);
}
.psr-btn.primary { background: var(--teal, #FF6B00); color: #fff; border-color: var(--teal, #FF6B00); }
.psr-btn.danger  { background: var(--psr-red); color: #fff; border-color: var(--psr-red); }

/* ---------- A/R Simple-Mode action cards (item 4) ---------- */
.psr-ar-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.psr-ar-card {
  background: #fff;
  border: 1px solid var(--bd-lt, #dde8e7);
  border-top: 3px solid var(--teal, #FF6B00);
  border-radius: 12px;
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.psr-ar-card.warn   { border-top-color: var(--psr-yellow); }
.psr-ar-card.danger { border-top-color: var(--psr-red); }
.psr-ar-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--navy, #1a3a72);
  text-transform: uppercase; letter-spacing: .3px;
}
.psr-ar-card-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 700; color: var(--teal-dk, #1f6f63);
  line-height: 1;
}
.psr-ar-card-sub { font-size: 11px; color: var(--tx-lt, #6b7e7c); }

/* ---------- Material deposit toggle / lock (item 6) ---------- */
.psr-md-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--bd-lt, #dde8e7);
  border-radius: 10px; background: #fff; margin-bottom: 8px;
  font-size: 13px;
}
.psr-md-row.locked  { border-color: var(--psr-red); background: var(--psr-red-bg); }
.psr-md-row.allowed { border-color: var(--teal-md, #5fbcad); background: #eaf6f4; }
.psr-md-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  letter-spacing: .3px; text-transform: uppercase;
  background: #fff; color: var(--tx, #2c3e3c); border: 1px solid var(--bd, #cdd9d8);
}
.psr-md-row.locked .psr-md-tag { color: var(--psr-red); border-color: var(--psr-red); }
.psr-md-row.allowed .psr-md-tag { color: var(--teal-dk, #1f6f63); border-color: var(--teal-md, #5fbcad); }
.psr-md-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--tx-lt, #6b7e7c);
}

/* ---------- Schedule reply buttons (item 7) ---------- */
.psr-sched-replies {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.psr-reply-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .3px;
  border: 1.5px solid var(--bd, #cdd9d8); background: #fff;
  color: var(--navy, #1a3a72);
}
.psr-reply-btn.confirm { border-color: var(--teal, #FF6B00); color: var(--teal-dk, #1f6f63); }
.psr-reply-btn.confirm.active { background: var(--teal, #FF6B00); color: #fff; }
.psr-reply-btn.question.active { background: var(--psr-yellow); color: #fff; border-color: var(--psr-yellow); }
.psr-reply-btn.issue.active { background: var(--psr-red); color: #fff; border-color: var(--psr-red); }

/* ---------- Lily Doc Studio template starter (item 13) ---------- */
.psr-doc-templates {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; margin-top: 10px;
}
.psr-doc-tpl {
  background: #fff; border: 1px solid var(--bd-lt, #dde8e7);
  border-radius: 12px; padding: 12px; cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.psr-doc-tpl:hover {
  border-color: var(--teal, #FF6B00);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,107,0,.12);
}
.psr-doc-tpl.featured { border-top: 3px solid var(--teal, #FF6B00); }
.psr-doc-tpl-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 14px; color: var(--navy, #1a3a72);
  text-transform: uppercase; letter-spacing: .3px;
}
.psr-doc-tpl-desc { font-size: 11px; color: var(--tx-lt, #6b7e7c); margin-top: 4px; }
.psr-doc-tpl-flow {
  margin-top: 6px;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.psr-doc-tpl-flow span {
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: #f3f7f6; color: var(--tx-lt, #6b7e7c);
  border: 1px solid var(--bd-lt, #dde8e7);
}

/* ---------- Notification preferences (item 12) ---------- */
.psr-notif-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--bd-lt, #dde8e7);
  font-size: 13px;
}
.psr-notif-row:last-child { border-bottom: none; }
.psr-notif-name { font-weight: 600; color: var(--navy, #1a3a72); flex: 1; }
.psr-notif-channels { display: flex; gap: 6px; }
.psr-notif-ch {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--bd, #cdd9d8); background: #fff;
  font-size: 11px; font-weight: 700; cursor: pointer;
  color: var(--tx-lt, #6b7e7c); font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase; letter-spacing: .3px;
}
.psr-notif-ch.active { background: var(--teal, #FF6B00); color: #fff; border-color: var(--teal, #FF6B00); }

/* ---------- Toast (matches existing portal pattern) ---------- */
.psr-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
  background: var(--navy, #1a3a72); color: #fff;
  padding: 10px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  opacity: 0; transition: opacity .25s, transform .25s;
  z-index: 9500; pointer-events: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.psr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.psr-toast.warn { background: var(--psr-yellow); color: #2a1d00; }
.psr-toast.danger { background: var(--psr-red); }

/* Mobile: move toasts/snackbars to the top so they cannot collide with
   the Ask Lily FAB anchored at right:22px;bottom:22px (size 60×60).
   The Lily FAB owns roughly the bottom 100px × right 100px region on
   small screens; keeping toasts in the bottom-right zone consumes that
   tap target and was flagged in the May 6 stress-test.  Top-center on
   mobile preserves the existing left:50% centering and leaves the FAB
   fully tappable.  Lily FAB z-index stays higher (160 on mobile via
   home_admin_layout.css) so even an overlapping surface yields the FAB. */
@media (max-width: 640px) {
  .psr-toast {
    bottom: auto;
    top: 16px;
    transform: translateX(-50%) translateY(-8px);
    z-index: 9400; /* still high, but below the Lily FAB */
  }
  .psr-toast.show { transform: translateX(-50%) translateY(0); }
}

/* ---------- Admin Settings — Permissions launcher (item 1 placement) ---------- */
.psr-settings-section {
  background: #fff;
  border: 1px solid var(--bd-lt, #dde8e7);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0;
}
.psr-settings-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--navy, #1a3a72);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 4px;
}
.psr-settings-sub { font-size: 12px; color: var(--tx-lt, #6b7e7c); margin: 0 0 10px; }
.psr-settings-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Per-worker preferred language selector (item 7) ---------- */
.psr-lang-select {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--bd, #cdd9d8); background: #fff;
}
.psr-lang-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; color: var(--navy, #1a3a72);
  text-transform: uppercase; letter-spacing: .3px;
}
.psr-lang-input {
  border: 0; background: transparent;
  font-family: 'Barlow', sans-serif; font-size: 12px;
  color: var(--tx, #2c3e3c); padding: 2px 4px; cursor: pointer;
}
.psr-lang-input:focus { outline: none; }
.psr-worker-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--bd-lt, #dde8e7);
}
.psr-worker-row:last-child { border-bottom: none; }
.psr-worker-name { font-weight: 600; color: var(--navy, #1a3a72); flex: 1; min-width: 140px; }

/* ---------- Universal approvals (My Day + queues) — uses existing appr-* tokens ---------- */
/* Card list: shows complete context at a glance. */
.psr-appr-list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0; margin: 0;
}
.psr-appr-card {
  background: #fff;
  border: 1px solid var(--bd-lt, #dde8e7);
  border-left: 4px solid var(--teal, #FF6B00);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-items: start;
}
.psr-appr-card.urgent  { border-left-color: var(--psr-red); }
.psr-appr-card.warning { border-left-color: var(--psr-yellow); }
.psr-appr-card.normal  { border-left-color: var(--teal, #FF6B00); }
.psr-appr-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.psr-appr-card-hd {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.psr-appr-card-kind {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .3px;
  background: #eef4f3; color: var(--navy, #1a3a72);
}
.psr-appr-card-urgency {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .3px;
}
.psr-appr-card.urgent  .psr-appr-card-urgency { background: var(--psr-red-bg);    color: var(--psr-red); }
.psr-appr-card.warning .psr-appr-card-urgency { background: var(--psr-yellow-bg); color: var(--psr-yellow); }
.psr-appr-card.normal  .psr-appr-card-urgency { background: var(--psr-green-bg);  color: var(--psr-green); }
.psr-appr-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--navy, #1a3a72);
  line-height: 1.2;
}
.psr-appr-card-meta {
  font-size: 12px; color: var(--tx-lt, #6b7e7c); line-height: 1.5;
}
.psr-appr-card-meta b { color: var(--navy, #1a3a72); font-weight: 700; }
.psr-appr-card-context {
  font-size: 12px; color: var(--tx, #2c3e3c);
  background: #f8fbfa; border: 1px solid #eef4f3;
  border-radius: 8px; padding: 6px 8px; line-height: 1.4;
}
.psr-appr-card-missing {
  font-size: 11px; color: var(--psr-red);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.psr-appr-card-missing .tag {
  background: var(--psr-red-bg); color: var(--psr-red);
  padding: 2px 7px; border-radius: 999px;
  font-weight: 700; letter-spacing: .3px;
}
.psr-appr-card-lily {
  font-size: 11px; font-style: italic; color: var(--teal-dk, #1f6f63);
  border-left: 2px solid var(--teal, #FF6B00);
  padding: 2px 0 2px 8px;
}
.psr-appr-card-actions {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  min-width: 150px;
}
.psr-appr-card-actions .btn {
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 700;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--bd, #cdd9d8);
  background: #fff; color: var(--navy, #1a3a72);
  text-align: center; line-height: 1.2;
}
.psr-appr-card-actions .btn.primary {
  background: var(--teal, #FF6B00); color: #fff;
  border-color: var(--teal-dk, #1f6f63);
}
.psr-appr-card-actions .btn.primary:hover { background: var(--teal-dk, #1f6f63); }
.psr-appr-card-actions .btn.warn  { background: #fff4dc; color: #5a3b0b; border-color: #f1d28a; }
.psr-appr-card-actions .btn.deny  { background: #ffe4dc; color: #7a1f1a; border-color: #f6b3a3; }
.psr-appr-card-actions .btn.lily  { background: #f0e8ff; color: #5c3a8a; border-color: #d4c2f5; }

/* Detail/modal shell — uses the existing .appr-wrap / .appr-preview look the user
   liked. We only define a fallback overlay container here so the detail can render
   independently if VillaShell is unavailable. */
.psr-appr-overlay {
  position: fixed; inset: 0; z-index: 9700;
  background: rgba(20,19,16,.55);
  display: none; align-items: flex-start; justify-content: center;
  padding: 24px; overflow: auto;
}
.psr-appr-overlay.open { display: flex; }
.psr-appr-detail-shell {
  background: #fff; border-radius: 14px;
  width: min(1300px, 100%);
  padding: 16px 18px;
  border: 1px solid var(--bd-lt, #dde8e7);
}
.psr-appr-detail-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.psr-appr-detail-bar h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; color: var(--navy, #1a3a72);
  margin: 0; text-transform: uppercase; letter-spacing: .3px;
}
.psr-appr-close {
  background: #fff; color: var(--navy, #1a3a72);
  border: 1px solid var(--bd, #cdd9d8); border-radius: 8px;
  padding: 6px 12px; cursor: pointer; font-weight: 700;
}

/* ---------- Unified My Day task card (item 17) ----------
   One visual format for every My Day task type. The shared shell
   reuses the approval-card visual language (the format the user
   liked) so approvals, schedule items, RFIs, reminders, and
   follow-ups all read as one queue. Per-type differences live
   inside the card (kind chip, due label, action button labels)
   without affecting layout, spacing, or chip style. */
.psr-task-list { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; }
.psr-task-card.psr-appr-card { /* shares all .psr-appr-card visual rules */ }
.psr-task-card-done .psr-appr-card-title { text-decoration: line-through; opacity: .6; }

/* Hide the legacy .myday-item rows whenever the unified card list has
   replaced them so the user sees a single, consistent format. The
   underlying nodes are kept in the DOM (not removed) so VillaMyDay's
   complete / snooze / openItem handlers continue to operate on them. */
.myday-item.psr-task-source-hidden { display: none !important; }

/* Mobile niceties */
@media (max-width: 540px) {
  .psr-nat-grid { grid-template-columns: 1fr; }
  .psr-ar-cards { grid-template-columns: 1fr; }
  .psr-doc-templates { grid-template-columns: 1fr 1fr; }
  .psr-appr-card { grid-template-columns: 1fr; }
  .psr-appr-card-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .psr-task-card { grid-template-columns: 1fr; }
  .psr-task-card .psr-appr-card-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}

/* ---------- Home PlanHub ribbon color (distinct pink, NOT Lily purple).
   PlanHub previously shared the Lily purple gradient on the home rail,
   which made it visually indistinguishable from Lily AI Studio. The user
   asked for a tasteful pink so PlanHub stands on its own while staying
   inside the existing portal palette (warm, helper-tier — not destructive
   like .home-bigbtn-reminder which uses red #e63946 / #c1121f).

   Palette tokens (kept local to .home-bigbtn-planhub so no other
   surface picks up the pink):
     --psr-planhub-pink-1 : #ec4899  (rose-500, vivid but tasteful)
     --psr-planhub-pink-2 : #f472b6  (rose-400, lighter end of gradient)
     --psr-planhub-pink-shadow : rgba(236,72,153,.32)
   The shadow rgb is the rose-500 hex split — same shape as the Lily
   helper shadow so the elevation reads consistently across the rail. */
.home-bigbtn.home-bigbtn-planhub {
  --psr-planhub-pink-1: #ec4899;
  --psr-planhub-pink-2: #f472b6;
  --psr-planhub-pink-shadow: rgba(236, 72, 153, .32);
  background: linear-gradient(135deg, var(--psr-planhub-pink-1), var(--psr-planhub-pink-2));
  color: #fff;
  box-shadow: 0 8px 22px var(--psr-planhub-pink-shadow);
}
.home-bigbtn.home-bigbtn-planhub:hover {
  box-shadow: 0 12px 30px rgba(236, 72, 153, .42);
}
.home-bigbtn.home-bigbtn-planhub .home-bigbtn-ic {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.home-bigbtn.home-bigbtn-planhub .home-bigbtn-title,
.home-bigbtn.home-bigbtn-planhub .home-bigbtn-sub {
  color: #fff;
}