/* ==========================================================================
   PR419 — My Day Engine (mobile-only)
   Scoped to .pr419- prefix. Brand: orange #FF6B00, navy #141310.
   ========================================================================== */

.pr419-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  background: #F4F5F7;
  color: #141310;
  font-family: inherit;
}

/* Greeting bar */
.pr419-greeting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E3E6EC;
}
.pr419-greeting-title {
  font-size: 18px;
  font-weight: 700;
  color: #141310;
}
.pr419-greeting-role {
  display: inline-block;
  background: #141310;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Daily brief / TRai insight strip */
.pr419-trai-strip {
  background: #FFF7ED;
  border: 1px solid #FF6B00;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 10px 12px;
}
.pr419-trai-label {
  color: #FF6B00;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.pr419-trai-text {
  color: #7C2D00;
  font-size: 12px;
}
.pr419-trai-skeleton {
  background: #FFF7ED;
  border: 1px solid #FFE2C4;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 8px 0 0 0;
  height: 30px;
  position: relative;
  overflow: hidden;
}
.pr419-trai-skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
  -webkit-animation: pr419-shimmer 1.2s infinite;
  animation: pr419-shimmer 1.2s infinite;
}
@-webkit-keyframes pr419-shimmer {
  0% { -webkit-transform: translateX(-100%); }
  100% { -webkit-transform: translateX(100%); }
}
@keyframes pr419-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.pr419-brief-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 12px 4px 12px;
}

/* Day tabs */
.pr419-tabs {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #E3E6EC;
  background: #FFFFFF;
}
.pr419-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 3px solid transparent;
}
.pr419-tab.active {
  color: #FF6B00;
  border-bottom: 3px solid #FF6B00;
}
.pr419-tab-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  color: #6B7280;
}

/* Offline banner */
.pr419-offline-banner {
  background: #FEF2F2;
  border-bottom: 1px solid #DC2626;
  padding: 6px 16px;
  font-size: 12px;
  color: #991B1B;
  text-align: center;
}

/* Content area */
.pr419-content {
  padding: 12px;
}

/* Section header + divider */
.pr419-section {
  margin-bottom: 18px;
}
.pr419-section-hdr {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6B7280;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #E3E6EC;
}
.pr419-section-count {
  color: #9CA3AF;
  font-weight: 700;
  margin-left: 6px;
}
.pr419-section-empty {
  font-size: 12px;
  color: #9CA3AF;
  font-style: italic;
  padding: 4px 0;
}

/* Sort bar */
.pr419-sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F4F5F7;
  border: 1px solid #E3E6EC;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 12px;
}

/* Card base + accent bar */
.pr419-card {
  background: #FFFFFF;
  border: 1px solid #E3E6EC;
  border-radius: 10px;
  padding: 14px 14px 10px 18px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.pr419-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px 0 0 2px;
  background: #FF6B00;
}
.pr419-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #141310;
}
.pr419-card-meta {
  font-size: 12px;
  color: #6B7280;
  margin-top: 2px;
}
.pr419-card-amount {
  font-size: 14px;
  font-weight: 700;
  color: #141310;
  margin-top: 4px;
}
.pr419-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* Card states (left accent + background) */
.pr419-state-overdue { background: #FEF2F2; }
.pr419-state-overdue::before { background: #DC2626; }
.pr419-state-active { background: #FFFFFF; }
.pr419-state-active::before { background: #FF6B00; }
.pr419-state-blocker { background: #FEF2F2; }
.pr419-state-blocker::before { background: #DC2626; }
.pr419-state-attention { background: #FFFBEB; }
.pr419-state-attention::before { background: #F59E0B; }
.pr419-state-sent-back { background: #FFFBEB; }
.pr419-state-sent-back::before { background: #F59E0B; }
.pr419-state-delegated { background: #EFF6FF; }
.pr419-state-delegated::before { background: #3B82F6; }
.pr419-state-snoozed { background: #F9FAFB; }
.pr419-state-snoozed::before { background: #9CA3AF; }
.pr419-state-done { background: #F0FDF4; }
.pr419-state-done::before { background: #16A34A; }

/* Pills */
.pr419-pill {
  display: inline-block;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}
.pr419-pill-overdue { background: #FEE2E2; color: #991B1B; }
.pr419-pill-active { background: #FFEDD5; color: #9A3412; }
.pr419-pill-attention { background: #FEF3C7; color: #92400E; }

/* Buttons */
.pr419-btn {
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.pr419-btn-primary { background: #FF6B00; color: #FFFFFF; }
.pr419-btn-secondary { background: #F4F5F7; color: #1A1A2E; }
.pr419-btn-muted { background: #F4F5F7; color: #6B7280; }

/* Read receipt badges */
.pr419-rr-opened {
  background: #16A34A;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}
.pr419-rr-unopened {
  background: #DC2626;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

/* Collapsed done row */
.pr419-done-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 18px;
  background: #F0FDF4;
  border: 1px solid #16A34A;
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13px;
}
.pr419-done-row-title { font-weight: 600; color: #141310; }
.pr419-done-row-meta { color: #16A34A; font-size: 11px; margin-left: auto; }

/* Snooze count badge */
.pr419-snooze-count {
  color: #9CA3AF;
  font-size: 11px;
  font-style: italic;
}

/* Inline send-back input */
.pr419-sendback-input {
  width: 100%;
  border: 1px solid #E3E6EC;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  margin-top: 8px;
  font-family: inherit;
  box-sizing: border-box;
}

/* Age indicator */
.pr419-age {
  font-size: 11px;
  color: #9CA3AF;
  font-style: italic;
  margin-top: 2px;
}

/* Expand collapsed-jobs row */
.pr419-expand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px dashed #E3E6EC;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
}

/* All-clear state */
.pr419-allclear {
  background: #F0FDF4;
  border: 1px solid #16A34A;
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  margin: 16px;
}
.pr419-allclear-title {
  font-size: 16px;
  font-weight: 700;
  color: #16A34A;
  margin-bottom: 4px;
}
.pr419-allclear-text {
  font-size: 13px;
  color: #6B7280;
}

/* Mobile-only: hide on desktop */
@media (min-width: 768px) {
  .pr419-wrap { display: none; }
}