/* ============================================================
   app-event.css — lớp hiển thị cho phân hệ SỰ KIỆN (tiệc cưới / sự kiện)
   ------------------------------------------------------------
   Phân tầng hiển thị, từ trên xuống:
     1. HERO   — khối đổ màu đậm: sự kiện nào, còn bao nhiêu ngày, trạng thái
     2. KPI    — ô số liệu TÔ NỀN theo mức (ok / cần chú ý / nguy cấp)
     3. THẺ    — bảng, danh sách trên nền trắng
     4. CHI TIẾT — chip, dải màu mép trái, dòng tô nền để mắt bắt ngay
   Chỉ dùng ở các màn hình sự kiện; không đụng vào giao diện chung.
   ============================================================ */
:root{
  --ev:#be185d;          /* điểm nhấn của bản sự kiện (hồng đậm) */
  --ev-2:#f472b6;
  --ev-soft:#fdf2f8;
  --ev-ink:#831843;
  --ev-grad:linear-gradient(135deg,#1e1b4b 0%,#4c1d95 55%,#be185d 100%);
  --ph-prep:#6366f1; --ph-before:#0ea5e9; --ph-dday:#e11d48; --ph-after:#059669;
}

/* ---------- 1. HERO ---------- */
.ev-hero{
  background:var(--ev-grad);color:#fff;border-radius:14px;padding:18px 22px;margin-bottom:16px;
  position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(76,29,149,.25);
}
.ev-hero::before{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08)}
.ev-hero::after{content:"";position:absolute;left:35%;bottom:-120px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.05)}
.ev-hero > *{position:relative;z-index:1}
.ev-hero a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ev-hero .h-top{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.ev-hero .h-main{flex:1;min-width:240px}
.ev-hero .h-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.78;font-weight:700}
.ev-hero .h-title{font-size:24px;font-weight:780;margin-top:3px;letter-spacing:-.015em;line-height:1.15}
.ev-hero .h-sub{font-size:13px;opacity:.88;margin-top:5px}
.ev-hero .h-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ev-chip{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  border-radius:20px;padding:4px 11px;font-size:12px;font-weight:600;white-space:nowrap;
}
.ev-chip.hot{background:rgba(251,191,36,.28);border-color:rgba(251,191,36,.65)}
.ev-chip.bad{background:rgba(239,68,68,.32);border-color:rgba(254,202,202,.7)}
.ev-chip.good{background:rgba(52,211,153,.25);border-color:rgba(110,231,183,.6)}
.ev-count{
  flex:none;text-align:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  border-radius:12px;padding:10px 18px;min-width:132px;
}
.ev-count .c-val{font-size:36px;font-weight:820;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ev-count .c-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;opacity:.82;margin-top:7px;font-weight:700}
.ev-count.soon{background:rgba(251,191,36,.28);border-color:rgba(251,191,36,.7)}
.ev-count.today{background:rgba(239,68,68,.38);border-color:rgba(254,202,202,.85);animation:ev-pulse 1.6s ease-in-out infinite}
.ev-count.past{opacity:.7}
.ev-count.none{border-style:dashed}
@keyframes ev-pulse{0%,100%{box-shadow:0 0 0 0 rgba(254,202,202,.5)}50%{box-shadow:0 0 0 8px rgba(254,202,202,0)}}
.ev-hero .h-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.ev-hero .h-stat{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px;min-width:0}
.ev-hero .h-stat .s-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;opacity:.78;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-hero .h-stat .s-val{font-size:18px;font-weight:780;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ev-hero .h-stat .s-sub{font-size:11px;opacity:.82;margin-top:1px}
.ev-hero .h-stat.h-neg .s-val{color:#fecaca}
.ev-hero .h-stat.h-pos .s-val{color:#a7f3d0}
.ev-hero .bar-track{background:rgba(255,255,255,.22);margin-top:7px;height:6px}
.ev-hero .bar-fill{background:#fff}
.ev-hero .bar-fill.ok{background:#34d399}
.ev-hero .bar-fill.danger{background:#f87171}
.ev-hero .bar-fill.warn{background:#fbbf24}
.ev-hero.compact{padding:14px 18px}
.ev-hero.compact .h-title{font-size:19px}
.ev-hero.compact .ev-count{padding:8px 14px;min-width:110px}
.ev-hero.compact .ev-count .c-val{font-size:28px}

/* Tab của hồ sơ sự kiện: dạng viên, có số đếm */
.ev-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.ev-tabs .tab{
  border:1px solid var(--border);border-radius:20px;padding:6px 14px;background:var(--surface);
  font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;display:inline-flex;gap:7px;align-items:center;
}
.ev-tabs .tab:hover{border-color:var(--border-strong);color:var(--text)}
.ev-tabs .tab.active{background:var(--ev);border-color:var(--ev);color:#fff}
.ev-tabs .tab .t-n{background:rgba(15,23,42,.08);border-radius:10px;padding:0 7px;font-size:11px;font-weight:700}
.ev-tabs .tab.active .t-n{background:rgba(255,255,255,.25)}
.ev-tabs .tab .t-n.bad{background:var(--danger);color:#fff}

/* ---------- 2. KPI tô nền theo mức ---------- */
.kpi.fill{border:1px solid transparent}
.kpi.fill::after{display:none}
.kpi.fill .k-label{color:inherit;opacity:.72}
.kpi.fill .k-value{font-size:24px}
.kpi.fill .k-sub{color:inherit;opacity:.82}
.kpi.fill.k-ok{background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:#064e3b;border-color:#a7f3d0}
.kpi.fill.k-warn{background:linear-gradient(135deg,#fffbeb,#fef3c7);color:#78350f;border-color:#fde68a}
.kpi.fill.k-danger{background:linear-gradient(135deg,#fef2f2,#fee2e2);color:#7f1d1d;border-color:#fecaca}
.kpi.fill.k-brand{background:linear-gradient(135deg,#eff4ff,#dbeafe);color:#1e3a8a;border-color:#bfdbfe}
.kpi.fill.k-ev{background:linear-gradient(135deg,#fdf2f8,#fce7f3);color:var(--ev-ink);border-color:#fbcfe8}
.kpi.fill.k-neutral{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.kpi .k-hint{font-size:11px;margin-top:6px;display:inline-block;padding:1px 8px;border-radius:10px;background:rgba(15,23,42,.06);font-weight:600}

/* ---------- Stepper giai đoạn ---------- */
.ev-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.ev-step{border-radius:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden}
.ev-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ph)}
.ev-step .st-name{font-size:11.5px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em}
.ev-step .st-val{font-size:18px;font-weight:780;margin-top:2px;font-variant-numeric:tabular-nums}
.ev-step .st-val small{font-size:12px;font-weight:600;color:var(--muted)}
.ev-step .bar-track{margin-top:7px;height:5px}
.ev-step .bar-fill{background:var(--ph)}
.ev-step.done{background:var(--ok-soft);border-color:#a7f3d0}
.ev-step.late{background:var(--danger-soft);border-color:#fecaca}
.ev-step.active{box-shadow:0 0 0 2px var(--ph) inset;background:#fff}
.ph-prep{--ph:var(--ph-prep)}.ph-before{--ph:var(--ph-before)}.ph-dday{--ph:var(--ph-dday)}.ph-after{--ph:var(--ph-after)}

/* Thẻ giai đoạn: mép trên tô màu giai đoạn */
.card.ev-phase{border-top:4px solid var(--ph)}
.card.ev-phase .card-head h3{display:flex;gap:8px;align-items:center}
.ph-dot{width:9px;height:9px;border-radius:50%;background:var(--ph);display:inline-block}

/* ---------- 3/4. Dòng mốc tiến độ ---------- */
table.data tr.ms-overdue td{background:#fff5f5}
table.data tr.ms-overdue td:first-child{box-shadow:inset 4px 0 0 var(--danger)}
table.data tr.ms-today td{background:#fffbeb}
table.data tr.ms-today td:first-child{box-shadow:inset 4px 0 0 #f59e0b}
table.data tr.ms-doing td:first-child{box-shadow:inset 4px 0 0 var(--brand)}
table.data tr.ms-done td{color:var(--muted)}
table.data tr.ms-done td:first-child{box-shadow:inset 4px 0 0 var(--ok)}
.ms-due{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11.5px;font-weight:700;white-space:nowrap}
.ms-due.late{background:var(--danger);color:#fff}
.ms-due.today{background:#f59e0b;color:#fff}
.ms-due.soon{background:var(--warn-soft);color:var(--warn);border:1px solid #fde68a}
.ms-due.ok{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.ms-due.done{background:var(--ok-soft);color:var(--ok)}
.ms-check{
  width:26px;height:26px;border-radius:7px;border:2px solid var(--border-strong);background:#fff;cursor:pointer;
  display:inline-grid;place-items:center;font-size:14px;line-height:1;color:transparent;transition:all .15s;
}
.ms-check:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.ms-check.on{background:var(--ok);border-color:var(--ok);color:#fff}
.ms-owner{display:inline-flex;align-items:center;gap:6px}
.ms-owner .av{width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:10px;font-weight:800;display:grid;place-items:center;flex:none}

/* ---------- Dòng sự kiện trong danh sách ---------- */
.ev-pill{display:inline-block;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.ev-pill.far{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.ev-pill.near{background:var(--brand-soft);color:var(--brand)}
.ev-pill.soon{background:var(--warn);color:#fff}
.ev-pill.today{background:var(--danger);color:#fff}
.ev-pill.past{background:var(--surface-2);color:var(--muted);border:1px dashed var(--border-strong)}
.ev-pill.none{background:var(--surface-2);color:var(--muted);border:1px dashed var(--border-strong)}
table.data tr.ev-soon td{background:#fffbeb}
table.data tr.ev-soon td:first-child{box-shadow:inset 4px 0 0 var(--warn)}
table.data tr.ev-late td:first-child{box-shadow:inset 4px 0 0 var(--danger)}
table.data tr.ev-done td{color:var(--muted)}

/* Thẻ "sắp diễn ra" (nằm ngang, cuộn được) */
.ev-upcoming{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:16px}
.ev-up{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;
  display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;
}
.ev-up:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.ev-up .d{flex:none;width:52px;text-align:center;border-radius:9px;padding:6px 0;background:var(--ev-soft);color:var(--ev-ink);border:1px solid #fbcfe8}
.ev-up .d .dd{font-size:20px;font-weight:820;line-height:1}
.ev-up .d .mm{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.8;margin-top:2px}
.ev-up.soon .d{background:var(--warn);color:#fff;border-color:var(--warn)}
.ev-up.today .d{background:var(--danger);color:#fff;border-color:var(--danger)}
.ev-up .b{min-width:0;flex:1}
.ev-up .b .n{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-up .b .v{font-size:11.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-up .b .bar-track{margin-top:6px;height:5px}
.ev-up .p{flex:none;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Bảng cảnh báo ---------- */
.ev-warn-list{display:flex;flex-direction:column;gap:6px}
.ev-warn{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:9px;border:1px solid;font-size:13px}
.ev-warn .w-ico{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
.ev-warn.danger{background:var(--danger-soft);border-color:#fecaca;color:#7f1d1d}
.ev-warn.danger .w-ico{background:var(--danger)}
.ev-warn.warn{background:var(--warn-soft);border-color:#fde68a;color:#78350f}
.ev-warn.warn .w-ico{background:var(--warn)}
.ev-warn.info{background:var(--info-soft);border-color:#bae6fd;color:#0c4a6e}
.ev-warn.info .w-ico{background:var(--info)}
.ev-warn .w-body{flex:1;min-width:0}
.ev-warn .w-ref{font-weight:700}
.ev-warn .w-go{flex:none;font-size:12px;font-weight:700;white-space:nowrap}
.ev-warn-sum{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.ev-warn-sum .s{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;border:1px solid}
.ev-warn-sum .s.danger{background:var(--danger-soft);border-color:#fecaca;color:var(--danger)}
.ev-warn-sum .s.warn{background:var(--warn-soft);border-color:#fde68a;color:var(--warn)}
.ev-warn-sum .s.info{background:var(--info-soft);border-color:#bae6fd;color:var(--info)}

/* ---------- Bảng bóc tách ---------- */
.bq-wrap{max-height:68vh;overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.bq-wrap table.data thead th{position:sticky;top:0;background:var(--surface-2);z-index:2;box-shadow:inset 0 -1px 0 var(--border-strong)}
.bq-wrap table.data tfoot td{position:sticky;bottom:0;z-index:2;background:#fff7ed;border-top:2px solid #fdba74}
.bq-wrap table.data td{padding:6px 8px}
.bq-wrap table.data input,.bq-wrap table.data select{padding:5px 8px;font-size:12.5px;border-radius:6px}
.bq-wrap table.data tbody tr:hover{background:var(--ev-soft)}
tr.bq-group td{
  background:linear-gradient(90deg,var(--ev-soft),#fff);color:var(--ev-ink);font-weight:800;font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;padding:7px 12px;border-top:1px solid #fbcfe8;border-bottom:1px solid #fbcfe8;
}
tr.bq-group td{white-space:nowrap}
tr.bq-group td .g-sum{margin-left:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:700;color:var(--text-2)}
tr.bq-group td .g-sum::before{content:"·";margin-right:8px;color:var(--muted)}
.bq-add-grp{padding:0 7px;line-height:18px;font-size:13px;font-weight:800;color:var(--ev);border-color:#fbcfe8;margin-right:6px;vertical-align:middle}
.bq-add-grp:hover{background:var(--ev);color:#fff;border-color:var(--ev)}
td.bq-tt{font-weight:700;color:var(--text)}
td.bq-von{color:var(--text-2)}
td.bq-margin{font-weight:800}
td.bq-margin.pos{color:var(--ok)}
td.bq-margin.neg{color:var(--danger);background:#fee2e2}
tr.bq-nocost td.bq-von{background:#fffbeb}
tr.bq-done td:first-child{box-shadow:inset 4px 0 0 var(--ok)}
tr.bq-ordered td:first-child{box-shadow:inset 4px 0 0 var(--info)}
.bq-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--text-2);margin:8px 2px 0}
.bq-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}

/* ---------- Nhà cung cấp ---------- */
.ev-av{
  width:34px;height:34px;border-radius:9px;display:inline-grid;place-items:center;font-weight:800;font-size:12px;color:#fff;flex:none;
  background:var(--c,var(--brand));
}
.ev-cat{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;color:var(--c,var(--brand));background:var(--surface-2);border:1px solid var(--border)}
@supports (background:color-mix(in srgb,red 10%,#fff)){
  .ev-cat{background:color-mix(in srgb,var(--c,var(--brand)) 12%,#fff);border-color:color-mix(in srgb,var(--c,var(--brand)) 30%,#fff)}
}
.ev-stars{color:#f59e0b;letter-spacing:1px;font-size:13px}
.ev-stars .off{color:#e2e8f0}
.ev-vend{display:flex;gap:10px;align-items:center;min-width:0}
.ev-vend .n{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-vend .s{font-size:11.5px;color:var(--text-2)}
.ev-money{font-variant-numeric:tabular-nums;font-weight:700}
.ev-money.over{color:var(--danger)}
.ev-money.under{color:var(--ok)}
.ev-diff{display:inline-block;font-size:11px;font-weight:800;padding:1px 7px;border-radius:8px;margin-left:4px}
.ev-diff.over{background:var(--danger-soft);color:var(--danger)}
.ev-diff.under{background:var(--ok-soft);color:var(--ok)}

/* ---------- Dải sự kiện trên bảng điều hành ---------- */
.ev-band{
  background:linear-gradient(135deg,var(--ev-soft),#fff 60%);border:1px solid #fbcfe8;border-radius:14px;padding:14px 16px;margin-bottom:16px;
}
.ev-band .band-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ev-band .band-title{font-size:13px;font-weight:800;color:var(--ev-ink);text-transform:uppercase;letter-spacing:.08em}
.ev-band .band-title small{font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-2);margin-left:8px}
.ev-band .grid{margin-bottom:0}

/* Tiêu đề mục nhỏ */
.ev-sec{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800;margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.ev-sec::after{content:"";flex:1;height:1px;background:var(--border)}

@media (max-width:900px){
  .ev-hero .h-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-upcoming{grid-template-columns:1fr}
  .kpi.fill .k-value{font-size:21px}
  .ev-hero .h-title{font-size:20px}
  .ev-count{min-width:100px;padding:8px 12px}
  .ev-count .c-val{font-size:28px}
}
@media print{
  .ev-hero{background:#fff;color:#000;border:1px solid #999;box-shadow:none}
  .ev-hero .h-stat,.ev-count,.ev-chip{background:#fff;border-color:#999;color:#000}
}