/* Giao diện hoa Ngày Phụ nữ Việt Nam 20/10 — chỉ có hiệu lực khi js/core/festive.js gắn
   <html data-festive="women-day"> (13/10 → 21/10; hoặc xem trước ?hoa=1). Ngoài dịp: file này không đổi gì.
   Mỗi biến màu khai báo ở CẢ khối sáng và khối tối: khối sáng (0,2,0) nạp sau theme.css nên sẽ đè cả
   :root[data-theme="dark"] — khối tối (0,3,0) phải ghi lại đủ. Bảng số liệu giữ nguyên màu nền / chữ để dễ đọc. */
:root[data-festive="women-day"] {
  --sidebar-bg: #3D1846;
  --brand-hover: #55225F;
  --accent: #B4286F;  /* chữ badge trên nền --surface-selected đạt tương phản ≥ 4.5:1 */
  --on-accent: #FFFFFF;
  --surface-selected: #FCEAF3;
  --focus-ring: rgba(180, 40, 111, 0.28);
  --section-accent-bg: #FCEAF3;
  --section-accent-border: #F5C6DD;
  --festive-greeting-bg: #FDF0F6;
  --festive-greeting-border: #F3C2DA;
  --festive-greeting-text: #9C2A65;
  --festive-sidebar-veil: rgba(61, 24, 70, 0.55);
}

:root[data-festive="women-day"][data-theme="dark"] {
  --sidebar-bg: #2A1033;
  --brand-hover: #3E1A4A;
  --accent: #FF8CC6;
  --on-accent: #2A0718;
  --surface-selected: #4A2040;
  --focus-ring: rgba(255, 140, 198, 0.35);
  --section-accent-bg: #4A2040;
  --section-accent-border: #74365F;
  --festive-greeting-bg: #3A1A33;
  --festive-greeting-border: #74365F;
  --festive-greeting-text: #FFC2E0;
  --festive-sidebar-veil: rgba(42, 16, 51, 0.6);
}

/* Nút bông hoa Bật / Tắt cạnh nút Sáng / Tối (festive.js hiện nút trong dịp 20/10, tooltip + aria-label theo trạng thái).
   Tắt: nụ xám khép lại, thỉnh thoảng rung mời bấm. Bật: hoa hồng đung đưa nhẹ. Bấm: nở bung / khép lại. */
.festive-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.festive-toggle:hover { background: var(--surface-hover); }
.festive-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
:root[data-festive="women-day"] .festive-toggle { border-color: var(--festive-greeting-border); background: var(--festive-greeting-bg); }
.festive-toggle-flower { width: 22px; height: 22px; transition: transform 0.4s ease, filter 0.4s ease; transform-origin: 50% 60%; }
.festive-toggle[aria-pressed="true"] .festive-toggle-flower { animation: festive-sway 4s ease-in-out infinite; }
.festive-toggle[aria-pressed="false"] .festive-toggle-flower {
  filter: grayscale(1) opacity(0.6);
  transform: scale(0.72) rotate(-35deg);
  animation: festive-nudge 7s ease-in-out infinite;
}
.festive-toggle:hover .festive-toggle-flower { animation: none; transform: scale(1.12) rotate(18deg); filter: none; }
.festive-toggle.festive-blooming .festive-toggle-flower { animation: festive-bloom 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
.festive-toggle.festive-closing .festive-toggle-flower { animation: festive-close 0.55s ease-in; }
@keyframes festive-sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes festive-nudge {
  0%, 86%, 100% { transform: scale(0.72) rotate(-35deg); }
  89% { transform: scale(0.8) rotate(-20deg); }
  92% { transform: scale(0.8) rotate(-48deg); }
  95% { transform: scale(0.76) rotate(-28deg); }
}
@keyframes festive-bloom {
  0% { transform: scale(0.4) rotate(-120deg); filter: grayscale(1); }
  60% { transform: scale(1.35) rotate(15deg); filter: none; }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes festive-close {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(0.72) rotate(-35deg); filter: grayscale(1) opacity(0.6); }
}
/* Cánh hoa bung ra / rụng từ nút (festive.js burst) */
.festive-burst-petal {
  position: fixed;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  animation: festive-burst 1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.festive-burst-drop { animation: festive-drop 1.2s ease-in forwards; }
@keyframes festive-burst {
  0% { transform: translate(0, 0) scale(0.3) rotate(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--bx), var(--by)) scale(1.1) rotate(var(--br)); opacity: 0; }
}
@keyframes festive-drop {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.9; }
  100% { transform: translate(var(--bx), var(--by)) rotate(var(--br)); opacity: 0; }
}

/* Lời chúc ở thanh trên (CRM: đầu #globalHeaderRow, đẩy các nút sang phải; Tổng quan: đầu .header-controls) */
.festive-greeting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--festive-greeting-border);
  background: var(--festive-greeting-bg);
  color: var(--festive-greeting-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  min-width: 0;
}
header .header-controls .festive-greeting { margin-right: 0; }
.festive-greeting-flower { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 1100px) {
  .festive-greeting-text { display: none; }  /* màn hẹp: chỉ còn bông hoa (lời chúc ở aria-label) */
}
@media (max-width: 480px) {
  .festive-greeting { display: none; }  /* điện thoại: nhường chỗ cho các nút thanh trên */
}

/* Bó hoa góc dưới menu trái: nền của chính .sidebar (nền không cuộn theo menu nên luôn ở đáy phần đang thấy, kể cả
   menu dài phải cuộn). Lớp "veil" cùng màu sidebar phủ riêng vùng hoa để chữ menu đè lên vẫn rõ. Rộng cố định 220px: sidebar
   thu gọn (76px) chỉ còn thấy phần hoa bên trái. */
:root[data-festive="women-day"] .sidebar {
  background:
    linear-gradient(var(--festive-sidebar-veil), var(--festive-sidebar-veil)) left bottom / 100% 150px no-repeat,
    url("/img/festive/corner-bouquet.svg") left bottom / 220px auto no-repeat,
    var(--sidebar-bg);
}
@media (max-width: 720px) {
  :root[data-festive="women-day"] .sidebar { background: var(--sidebar-bg); }  /* menu thành thanh ngang: bỏ bó hoa */
}

/* Cánh hoa rơi vài giây khi mở trang — không chặn thao tác (pointer-events: none) */
.festive-petals {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
}
.festive-petal {
  position: absolute;
  top: -40px;
  opacity: 0;
  animation-name: festive-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
@keyframes festive-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.95; }
  85% { opacity: 0.9; }
  100% { transform: translate(var(--festive-drift, 40px), calc(100vh + 80px)) rotate(var(--festive-spin, 360deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .festive-petals, .festive-burst-petal { display: none; }
  .festive-toggle-flower { animation: none !important; transition: none; }
}