/**
 * MPI Pigeon Brand Overlay — chrome remaps + light CSS motion
 * Loaded after tissue/checkin. No JS. Respects prefers-reduced-motion.
 */
:root {
  --primary: #E60012;
  --primary-dark: #B71C1C;
  --primary-light: #FFEBEE;
}

body.mt-tissue-brand {
  --primary: #E60012;
  --primary-dark: #B71C1C;
  --primary-light: #FFEBEE;
}

/* MPI canvas — ฟ้าอ่อนแบบหน้าแรก ไม่ใช่ชมพู Pigeon */
html, body.mt-tissue-brand {
  background: #F3F7FC !important;
}
body.mt-tissue-brand .app {
  background: transparent !important;
}

/* Login hero — Pigeon wave banner energy */
body.mt-tissue-brand .login-hero,
body.mt-tissue-brand #s-login .login-hero {
  background:
    radial-gradient(ellipse 80% 60% at 85% 20%, rgba(255,255,255,0.22) 0%, transparent 55%),
    linear-gradient(160deg, #E60012 0%, #C62828 55%, #B71C1C 100%) !important;
  position: relative;
  overflow: hidden;
}
body.mt-tissue-brand .login-hero::after {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -18px;
  height: 36px;
  background: #F3F7FC;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
body.mt-tissue-brand .btn-primary,
body.mt-tissue-brand .mob-comp-mission-cta:not(.mob-comp-mission-cta-secondary),
body.mt-tissue-brand .mob-comp-mission-submit,
body.mt-tissue-brand .cp-competitor-btn-primary {
  background: linear-gradient(145deg, #FF5252 0%, #E60012 55%, #C62828 100%) !important;
  box-shadow: 0 10px 28px -8px rgba(230, 0, 18, 0.45) !important;
  color: #fff !important;
  border: none !important;
}
body.mt-tissue-brand .btn-outline {
  border-color: rgba(230, 0, 18, 0.35) !important;
  color: #E60012 !important;
}

/* Nav / headers — ธีมเดียวกับ Check In / หน้าแรก (navy → แดงขวา) */
body.mt-tissue-brand .nav-bar,
body.mt-tissue-brand .ch-hdr,
body.mt-tissue-brand .ah-hdr,
body.mt-tissue-brand .py-hdr {
  background: linear-gradient(100deg, #071e42 0%, #0c3d7a 62%, #E60012 100%) !important;
  border-bottom: 3px solid #E60012 !important;
  box-shadow: 0 8px 24px -10px rgba(7, 30, 66, 0.28) !important;
}
body.mt-tissue-brand .ah-btn-primary {
  background: linear-gradient(145deg, #0c3d7a 0%, #071e42 100%) !important;
  box-shadow: 0 8px 20px -8px rgba(7, 30, 66, 0.4) !important;
  color: #fff !important;
  border: none !important;
}
body.mt-tissue-brand .ah-btn-outline {
  border-color: #0c3d7a !important;
  color: #0c3d7a !important;
}
body.mt-tissue-brand .ah-route-hero h3,
body.mt-tissue-brand .ah-rw-title,
body.mt-tissue-brand .ah-modal-title,
body.mt-tissue-brand .ah-form-title {
  color: #0c3d7a !important;
}
body.mt-tissue-brand .ah-route-nav-btn.active,
body.mt-tissue-brand .ah-rw-tab.active,
body.mt-tissue-brand .ah-zone-chip.active {
  background: linear-gradient(135deg, #0c3d7a, #071e42) !important;
  border-color: #071e42 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(7, 30, 66, 0.25) !important;
}
body.mt-tissue-brand .mob-top-app-bar-glass {
  background: rgba(243, 247, 252, 0.86) !important;
}
/* ── สถานะวันนี้: SofTouch bottle photo + soft motion ── */
body.mt-tissue-brand .mob-hero-card,
body.mt-tissue-brand .mob-hero-card--pigeon {
  background: #FFF8F7 !important;
  isolation: isolate;
}
body.mt-tissue-brand .mob-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
body.mt-tissue-brand .mob-hero-bg-img {
  position: absolute;
  top: -8%;
  right: -6%;
  width: 78%;
  height: 118%;
  object-fit: cover;
  object-position: 62% 42%;
  opacity: 0.55;
  transform-origin: 70% 45%;
  animation: pigeon-hero-kenburns 18s ease-in-out infinite alternate;
  will-change: transform;
}
body.mt-tissue-brand .mob-hero-deco {
  z-index: 1 !important;
  background:
    linear-gradient(105deg,
      rgba(255, 248, 247, 0.97) 0%,
      rgba(255, 248, 247, 0.92) 38%,
      rgba(255, 245, 246, 0.72) 58%,
      rgba(255, 245, 246, 0.28) 78%,
      rgba(255, 245, 246, 0.08) 100%) !important;
}
body.mt-tissue-brand .mob-hero-deco::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 58%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: pigeon-hero-shimmer 7.5s ease-in-out infinite;
  pointer-events: none;
}
body.mt-tissue-brand .mob-hero-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
body.mt-tissue-brand .mob-hero-bg-orb--1 {
  width: 56px;
  height: 56px;
  top: 10%;
  right: 18%;
  background: radial-gradient(circle, rgba(255, 205, 210, 0.85) 0%, transparent 70%);
  animation: pigeon-orb-float 7s ease-in-out infinite;
}
body.mt-tissue-brand .mob-hero-bg-orb--2 {
  width: 40px;
  height: 40px;
  bottom: 16%;
  right: 8%;
  background: radial-gradient(circle, rgba(255, 143, 177, 0.55) 0%, transparent 72%);
  animation: pigeon-orb-float 9s ease-in-out infinite reverse;
  animation-delay: -2s;
}
body.mt-tissue-brand .mob-hero-bg-orb--3 {
  width: 28px;
  height: 28px;
  top: 42%;
  right: 42%;
  background: radial-gradient(circle, rgba(230, 0, 18, 0.18) 0%, transparent 70%);
  animation: pigeon-orb-float 6.2s ease-in-out infinite;
  animation-delay: -3.5s;
}
body.mt-tissue-brand .mob-hero-bg-sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.9), 0 0 18px rgba(230, 0, 18, 0.35);
  z-index: 2;
  animation: pigeon-sparkle-twinkle 2.8s ease-in-out infinite;
}
body.mt-tissue-brand .mob-hero-bg-sparkle--1 {
  top: 18%;
  right: 12%;
}
body.mt-tissue-brand .mob-hero-bg-sparkle--2 {
  bottom: 22%;
  right: 28%;
  width: 6px;
  height: 6px;
  animation-delay: -1.2s;
}
body.mt-tissue-brand .mob-hero-inner,
body.mt-tissue-brand .mob-hero-brand {
  position: relative;
  z-index: 3;
}
body.mt-tissue-brand .mob-hero-step {
  animation: pigeon-step-rise 0.55s ease both;
}
body.mt-tissue-brand .mob-hero-step:nth-child(1) { animation-delay: 0.05s; }
body.mt-tissue-brand .mob-hero-step:nth-child(2) { animation-delay: 0.14s; }
body.mt-tissue-brand .mob-hero-step:nth-child(3) { animation-delay: 0.22s; }
body.mt-tissue-brand .mob-hero-step:nth-child(4) { animation-delay: 0.3s; }
body.mt-tissue-brand .mob-hero-brand-rule {
  transform-origin: right center;
  animation: pigeon-rule-draw 1.1s ease both 0.35s;
  background: linear-gradient(90deg, #FF8A80, #E60012) !important;
}
body.mt-tissue-brand .mob-hero-step.current .mob-hero-node {
  border-color: #fff !important;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #FFCDD2 45%, #E60012 100%) !important;
  box-shadow:
    0 0 0 4px rgba(230, 0, 18, 0.22),
    0 0 18px rgba(230, 0, 18, 0.45) !important;
  animation: pigeon-node-pulse 2.4s ease-in-out infinite;
}
body.mt-tissue-brand .mob-hero-timeline::before {
  background: linear-gradient(180deg, rgba(255, 205, 210, 0.45) 0%, rgba(230, 0, 18, 0.28) 50%, rgba(255, 205, 210, 0.4) 100%) !important;
}
body.mt-tissue-brand .mob-hero-timeline::after {
  background: linear-gradient(180deg, #FF8A80 0%, #E60012 55%, #C62828 100%) !important;
  box-shadow: 0 0 10px rgba(230, 0, 18, 0.4) !important;
}
body.mt-tissue-brand .mob-hero-node {
  border-color: rgba(230, 0, 18, 0.35) !important;
  background: radial-gradient(circle at 38% 32%, #ffffff 0%, #FFE8EA 68%) !important;
}
body.mt-tissue-brand .mob-hero-step.done .mob-hero-node {
  border-color: rgba(230, 0, 18, 0.55) !important;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #FFCDD2 50%, #E53935 100%) !important;
  box-shadow: 0 0 12px rgba(230, 0, 18, 0.28) !important;
}

@keyframes pigeon-hero-kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-3%, 2%); }
}
@keyframes pigeon-hero-shimmer {
  0%, 100% { background-position: 120% 0; opacity: 0; }
  40% { opacity: 0.55; }
  55% { background-position: -20% 0; opacity: 0.2; }
}
@keyframes pigeon-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
  50% { transform: translate(-10px, -14px) scale(1.12); opacity: 0.75; }
}
@keyframes pigeon-sparkle-twinkle {
  0%, 100% { transform: scale(0.6); opacity: 0.25; }
  50% { transform: scale(1.15); opacity: 1; }
}
@keyframes pigeon-step-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pigeon-rule-draw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes pigeon-node-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(230, 0, 18, 0.18),
      0 0 14px rgba(230, 0, 18, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 7px rgba(230, 0, 18, 0.12),
      0 0 22px rgba(230, 0, 18, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mt-tissue-brand .mob-hero-bg-img,
  body.mt-tissue-brand .mob-hero-deco::after,
  body.mt-tissue-brand .mob-hero-bg-orb,
  body.mt-tissue-brand .mob-hero-bg-sparkle,
  body.mt-tissue-brand .mob-hero-step,
  body.mt-tissue-brand .mob-hero-brand-rule,
  body.mt-tissue-brand .mob-hero-step.current .mob-hero-node {
    animation: none !important;
  }
}
body.mt-tissue-brand .mob-tab.on .mob-tab-ic {
  background: linear-gradient(160deg, #ffffff 0%, #e8eef8 100%) !important;
  box-shadow:
    0 0 0 6px rgba(12, 61, 122, 0.12),
    0 0 22px rgba(7, 30, 66, 0.22),
    var(--mt-tissue-shadow-sm) !important;
}
body.mt-tissue-brand .mob-tab.on,
body.mt-tissue-brand .mob-tab.on .mob-tab-lbl,
body.mt-tissue-brand .mob-tab.on .mob-tab-label,
body.mt-tissue-brand .mob-tab-fab-lbl {
  color: #0c3d7a !important;
  font-weight: 700;
}

/* Cards — ขาวสะอาดแบบหน้าแรก ไม่วอลช์ชมพู */
body.mt-tissue-brand .mob-card,
body.mt-tissue-brand .mob-task-box,
body.mt-tissue-brand .acc-card,
body.mt-tissue-brand .ch-tile,
body.mt-tissue-brand .ah-tile,
body.mt-tissue-brand .mob-work-featured {
  background: #fff !important;
}
body.mt-tissue-brand .ah-tile-route .ah-tile-ic,
body.mt-tissue-brand .ah-tile-emp .ah-tile-ic,
body.mt-tissue-brand #s-admin-settings .ah-tile-ic {
  background: transparent !important;
  color: inherit !important;
}
body.mt-tissue-brand #s-admin-settings .ah-tile-img,
body.mt-tissue-brand .mob-profile-card-ic img,
body.mt-tissue-brand .ah-att-route-card-ic img {
  animation: pigeon-ic-bob 3.4s ease-in-out infinite;
}

/* Account / category icons — soft bob (GPU transform only) */
@keyframes pigeon-icon-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.04); }
}
@keyframes pigeon-icon-sparkle {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(230,0,18,0.12)); }
  50% { filter: drop-shadow(0 6px 12px rgba(230,0,18,0.22)); }
}
@keyframes pigeon-pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 0, 18, 0); }
  50% { box-shadow: 0 0 0 8px rgba(230, 0, 18, 0.08); }
}

body.mt-tissue-brand .acc-card img,
body.mt-tissue-brand .cat-icon-box img,
body.mt-tissue-brand .cat-icon-box--img img,
body.mt-tissue-brand .ch-tile-ic img,
body.mt-tissue-brand .ah-tile-img,
body.mt-tissue-brand .mob-work-featured-ic img,
body.mt-tissue-brand .mob-mission-ic img {
  animation: pigeon-icon-bob 3.6s ease-in-out infinite, pigeon-icon-sparkle 3.6s ease-in-out infinite;
  will-change: transform;
  transform: translateZ(0);
}
body.mt-tissue-brand .acc-card:nth-child(2n) img,
body.mt-tissue-brand .cat-icon-box:nth-child(2n) img,
body.mt-tissue-brand .ch-tile:nth-child(2n) .ch-tile-ic img {
  animation-delay: -1.2s;
}
body.mt-tissue-brand .acc-card:nth-child(3n) img,
body.mt-tissue-brand .cat-icon-box:nth-child(3n) img {
  animation-delay: -2.1s;
}
body.mt-tissue-brand .acc-card:active,
body.mt-tissue-brand .ch-tile:active,
body.mt-tissue-brand .mob-work-featured:active,
body.mt-tissue-brand .cat-icon-box:active {
  transform: scale(0.97);
  transition: transform 0.15s ease;
}
body.mt-tissue-brand .acc-card,
body.mt-tissue-brand .ch-tile,
body.mt-tissue-brand .mob-mission-card {
  animation: pigeon-pulse-soft 5s ease-in-out infinite;
}
body.mt-tissue-brand .acc-card:nth-child(odd),
body.mt-tissue-brand .ch-tile:nth-child(odd) {
  animation-delay: -2.5s;
}

/* Progress / accents often hardcoded blue in index */
body.mt-tissue-brand .cat-progress-fill,
body.mt-tissue-brand .prog-fill {
  background: linear-gradient(90deg, #E60012, #FF5252) !important;
}
body.mt-tissue-brand .instruction-banner,
body.mt-tissue-brand #today-schedule-banner {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2) !important;
  border-left-color: #E60012 !important;
  color: #B71C1C !important;
}

/* Admin portal sidebar — navy SO (ไม่ไล่แดงเต็มแถบ; topbar ใช้ navy→แดง) */
body.mt-tissue-brand #admin-portal-sidebar,
body.mt-tissue-brand .admin-portal-sidebar {
  background: linear-gradient(180deg, #071e42 0%, #0c3d7a 100%) !important;
}
body.mt-tissue-brand .admin-nav-item.is-active,
body.mt-tissue-brand .admin-nav-item.active {
  background: rgba(230, 0, 18, 0.22) !important;
  color: #fff !important;
}

/* Holiday H stay vivid red (already), ensure path */
body.mt-tissue-brand .mob-thcal-val-holiday {
  color: #E60012 !important;
}

/* Soft home wave strip under header when on home */
body.mt-tissue-brand.mobile-app-enabled.mob-on-home #s-mobile-home .mob-body::before {
  content: '';
  display: block;
  height: 10px;
  margin: 0 0 8px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(230, 0, 18, 0.18), transparent 70%);
  border-radius: 0 0 40% 40%;
  pointer-events: none;
  animation: pigeon-wave-breathe 6s ease-in-out infinite;
}
@keyframes pigeon-wave-breathe {
  0%, 100% { opacity: 0.7; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.35); }
}

/* ── Pigeon menu icons: size + soft motion ── */
.pigeon-ic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  transform: translateZ(0);
}
.mob-ls-card-ic .pigeon-ic {
  width: 26px;
  height: 26px;
}
.ah-att-route-card-ic {
  font-size: 0 !important;
  background: transparent !important;
  border: none !important;
}
.ah-att-route-card-ic img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.mob-ls-card-ic.swap,
.mob-ls-card-ic.leave,
.mob-ls-card-ic.half {
  background: linear-gradient(160deg, #fff, #e8eef8) !important;
}

@keyframes pigeon-ic-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes pigeon-ic-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
@keyframes pigeon-ic-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(0, -2px) scale(1.05); }
}
@keyframes pigeon-ic-tick {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.12); }
  60% { transform: scale(0.96); }
}
@keyframes pigeon-ic-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.mt-tissue-brand .pigeon-ic--bob { animation: pigeon-ic-bob 2.6s ease-in-out infinite; }
body.mt-tissue-brand .pigeon-ic--sway {
  animation: pigeon-ic-sway 2.8s ease-in-out infinite;
  transform-origin: 50% 80%;
}
body.mt-tissue-brand .pigeon-ic--float { animation: pigeon-ic-float 3s ease-in-out infinite; }
body.mt-tissue-brand .pigeon-ic--tick { animation: pigeon-ic-tick 2.1s ease-in-out infinite; }
body.mt-tissue-brand .pigeon-ic--spin {
  animation: pigeon-ic-spin 7s linear infinite;
  transform-origin: 50% 50%;
}

/* Stagger tab icons a bit */
body.mt-tissue-brand #mobile-app-tabbar .mob-tab-ic img {
  animation: pigeon-ic-bob 2.8s ease-in-out infinite;
}
body.mt-tissue-brand #mobile-app-tabbar .mob-tab-fab .mob-tab-ic img {
  animation: none;
}
body.mt-tissue-brand #mobile-app-tabbar .mob-tab:nth-child(2) .mob-tab-ic img { animation-delay: -0.6s; }
body.mt-tissue-brand #mobile-app-tabbar .mob-tab:nth-child(4) .mob-tab-ic img { animation-delay: -1.4s; }
body.mt-tissue-brand #mobile-app-tabbar .mob-tab:nth-child(5) .mob-tab-ic img { animation-delay: -2.1s; }

/* Featured work cards: light coral wash to match brand */
body.mt-tissue-brand .mob-work-featured {
  background: linear-gradient(145deg, #ffffff 0%, #FFF5F6 55%, #FFE8EA 100%) !important;
  border-color: rgba(230, 0, 18, 0.12) !important;
}
body.mt-tissue-brand .mob-work-featured-go {
  color: #E60012 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.mt-tissue-brand .acc-card img,
  body.mt-tissue-brand .cat-icon-box img,
  body.mt-tissue-brand .cat-icon-box--img img,
  body.mt-tissue-brand .ch-tile-ic img,
  body.mt-tissue-brand .ah-tile-img,
  body.mt-tissue-brand .mob-work-featured-ic img,
  body.mt-tissue-brand .mob-mission-ic img,
  body.mt-tissue-brand .acc-card,
  body.mt-tissue-brand .ch-tile,
  body.mt-tissue-brand .mob-mission-card,
  body.mt-tissue-brand .pigeon-ic,
  body.mt-tissue-brand .pigeon-ic--bob,
  body.mt-tissue-brand .pigeon-ic--sway,
  body.mt-tissue-brand .pigeon-ic--float,
  body.mt-tissue-brand .pigeon-ic--tick,
  body.mt-tissue-brand .pigeon-ic--spin,
  body.mt-tissue-brand #mobile-app-tabbar .mob-tab-ic img,
  body.mt-tissue-brand.mobile-app-enabled.mob-on-home #s-mobile-home .mob-body::before {
    animation: none !important;
  }
}