/* The complete event card (js/event-card.js).

   Scoped to #evDetailBackdrop and the .evc- prefix. The card reuses the shell
   index.html already styles — .ev-form-backdrop, .ev-detail-card,
   .ev-detail-header, .ev-detail-body, .ev-detail-footer, .ev-detail-status and
   the .ev-chip-status-* fills — and adds only what the gathered sections need.

   Colour convention, as established across css/links.css, css/tasks.css and
   css/assets.css: most colours here are theme-aware custom properties
   (--charcoal-soft, --concrete, --glass-border, --bone, --sand, --muted all
   redefine themselves under body.light-theme in index.html's inline
   stylesheet), so those rules need no counterpart. The convention that a flat
   accent is safe holds for FILLS and BORDERS only — as text, raw --amber reads
   about 2:1 on a light card and #E05A4A about 3.2:1, both under AA. Every flat
   accent used AS TEXT below therefore carries a body.light-theme counterpart,
   reusing the pair already in use everywhere else in this codebase: #9C5C08 for
   amber, #B03A2E for red. --teal-bright is the third case, at ~2.6:1 on white,
   and drops to the deeper --teal in light theme — same pair as .todo-state-on.

   Net figures deliberately reuse .ev-net-pos / .ev-net-neg rather than defining
   their own colours: those two already have contrast-checked light-theme
   overrides in index.html, and profit is the one number that must read the same
   wherever it appears. */

/* ===== The card as a scroll container ==============================
   The card is now long — ten sections rather than a handful of rows — so the
   header and footer stick to the top and bottom of the scroll box. Without
   that, Close and Edit sit a full screen below the fold on a phone and the
   event's name scrolls away before the money section is reached. */

#evDetailBackdrop .ev-detail-card {
  max-height: 88vh;
  /* dvh accounts for the mobile browser chrome that vh ignores. Declared second
     so it simply wins where supported and is ignored where it is not. */
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Stops a flick at the end of the card from scrolling the module behind it. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#evDetailBackdrop .ev-detail-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--charcoal-soft);
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.7rem;
}

#evDetailBackdrop .ev-detail-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  background: var(--charcoal-soft);
  border-top: 1px solid var(--glass-border);
  padding-top: 0.8rem;
}

/* ===== Header chips ================================================
   Size, type and tier join the status chip instead of taking three fact rows
   of their own. .ev-detail-status carries margin:0 1.5rem 1rem from the inline
   stylesheet, which the flex row supplies instead. */

#evDetailStatusWrap .evc-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0.9rem 1.5rem 0.2rem;
}
#evDetailStatusWrap .ev-detail-status { margin: 0; }

.evc-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 50px;
  background: var(--glass-white);
  border: 1px solid var(--glass-border);
  color: var(--sand);
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

/* ===== Sections ==================================================== */

.evc-body { display: flex; flex-direction: column; gap: 1.4rem; }

.evc-sec { display: flex; flex-direction: column; gap: 0.5rem; }

/* Amber as text, hence the override. */
.evc-sec-title {
  font-family: 'Archivo', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--amber);
  margin: 0;
}
body.light-theme .evc-sec-title { color: #9C5C08; }

/* ===== Label / value pairs ========================================= */

.evc-facts {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0.45rem 0.9rem;
  margin: 0;
}
.evc-facts dt {
  font-size: 0.6rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding-top: 3px;
}
.evc-facts dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--bone);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Links follow .ev-detail-grid dd a (amber) rather than .ev-detail-val a
   (--st-accepted, #14B8A6): the teal reads about 2.2:1 on the white light-theme
   card and has no override in the inline stylesheet. Amber as text, hence the
   counterpart. */
.evc-facts dd a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
body.light-theme .evc-facts dd a { color: #9C5C08; }

/* ===== Money ======================================================= */

.evc-money {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0.5rem;
}
.evc-money-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--glass-white);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  min-width: 0;
}
.evc-money-k {
  font-size: 0.58rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.evc-money-v {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bone);
  overflow-wrap: anywhere;
}
/* The figure the event was chased for, sitting beside what it actually made.
   --sand is theme-aware, so it needs no counterpart, and being quieter than
   --bone it reads as the estimate rather than the result. */
.evc-money-expected { color: var(--sand); font-size: 0.95rem; }
.evc-money-note { font-size: 0.66rem; color: var(--muted); }

/* ===== Line lists — sales, costs, tasks, menu items ================ */

.evc-lines {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
}
.evc-line {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--glass-border);
}
.evc-line:last-child { border-bottom: 0; }

.evc-line-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.evc-line-name {
  font-size: 0.87rem;
  color: var(--bone);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.evc-line-sub { font-size: 0.68rem; color: var(--muted); line-height: 1.4; }

.evc-line-qty {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.evc-line-amt {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--bone);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Completed tasks stay on the card but recede — they are history, not work. */
.evc-lines-dim { opacity: 0.55; }
.evc-line-done .evc-line-name { text-decoration: line-through; }

/* Overdue. Red as text, hence the override. */
.evc-sub-alert { color: #E05A4A; }
body.light-theme .evc-sub-alert { color: #B03A2E; }

/* What sold is the one figure on the card the hub has never surfaced before,
   so it gets the accent. Amber as text, hence the override. */
.evc-amt-good { color: var(--amber); }
body.light-theme .evc-amt-good { color: #9C5C08; }

.evc-total {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.2rem;
}
.evc-total-amt { color: var(--amber); font-weight: 700; letter-spacing: 0; font-size: 0.85rem; }
body.light-theme .evc-total-amt { color: #9C5C08; }

/* ===== Quiet lines and free text =================================== */

.evc-quiet { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.evc-quiet-inline { font-size: 0.75rem; color: var(--muted); margin-left: 0.4rem; }

.evc-notes {
  background: var(--concrete);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.83rem;
  color: var(--sand);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ===== Application watch =========================================== */

.evc-watch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; margin-top: 0.5rem; }
.evc-watch .evc-notes { flex: 1 1 100%; }

/* --teal-bright reads well on charcoal but only ~2.6:1 on white, so light
   theme drops to the deeper --teal. Same pair as .todo-state-on. */
.evc-watch-on { font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--teal-bright); }
body.light-theme .evc-watch-on { color: var(--teal); }
.evc-watch-off { font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: #E05A4A; }
body.light-theme .evc-watch-off { color: #B03A2E; }

/* ===== Deposit ===================================================== */

.evc-paid { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--teal-bright); }
body.light-theme .evc-paid { color: var(--teal); }
.evc-unpaid { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: #E05A4A; }
body.light-theme .evc-unpaid { color: #B03A2E; }

/* ===== Menu ======================================================== */

.evc-menu { display: flex; flex-direction: column; gap: 0.45rem; }
.evc-menu + .evc-menu { margin-top: 0.6rem; }
.evc-menu-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 0.95rem; color: var(--bone); }

/* ===== Phone ========================================================
   The hub is used from a home-screen PWA, and this card is the longest screen
   in it. Below 560px it becomes a full-height sheet: no backdrop gutter, no
   rounded corners wasting width, sticky header and footer so the name and the
   Close/Edit buttons are always on screen, and the footer padded past the
   home indicator. */

@media (max-width: 560px) {
  #evDetailBackdrop { padding: 0; align-items: stretch; }
  #evDetailBackdrop .ev-detail-card {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  #evDetailBackdrop .ev-detail-header { padding: 1.1rem 1.1rem 0.7rem; }
  #evDetailStatusWrap .evc-chips { padding: 0.8rem 1.1rem 0.2rem; }
  #evDetailBackdrop .ev-detail-body { padding: 0 1.1rem 1.2rem; }
  #evDetailBackdrop .ev-detail-footer {
    padding: 0.8rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom));
  }
  #evDetailBackdrop .ev-detail-name { font-size: 1.25rem; }
}

/* At around 380px a 96px label column leaves too little for the value, and
   long venue names and URLs start breaking mid-word. Labels move above their
   values instead, and the money tiles fall to two across. */
@media (max-width: 420px) {
  .evc-facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .evc-facts dt { padding-top: 0.5rem; }
  .evc-facts dd { padding-bottom: 0.15rem; }
  .evc-money { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .evc-money-v { font-size: 0.98rem; }
  .evc-line { padding: 0.55rem 0.65rem; gap: 0.5rem; }
  .evc-body { gap: 1.2rem; }
}