/* City Viewer — shared list components: item rows, events, directory cards. */

/* ---- Item row: checkouts, holds, saved titles, messages, fines (drawer subviews) -------- */
/* Text-only rows (messages, fines — not catalog items) use .item-main/.item-title/.item-detail
   directly. Catalog rows (checkouts/holds/saved titles) instead host a <library-item-card> — see
   .item-row-card below and cv-drawer.js's #catalogRow/#populateCatalogRows — so every patron-owned
   catalog list shares one display with Find's search results, not a hand-rolled text format each. */
.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);

  /* Attention state, e.g. hold ready for pickup */
  &.is-ready {
    background: color-mix(in oklab, var(--success) 10%, var(--surface));
    border-radius: var(--radius-sm);
    padding-inline: var(--space-2);
    border-bottom-color: transparent;
  }

  /* Unread patron message — same attention treatment, accent-toned instead of success-toned
     (an unread notice isn't a "good news" state the way a ready hold is). */
  &.is-unread {
    background: color-mix(in oklab, var(--accent) 8%, var(--surface));
    border-radius: var(--radius-sm);
    padding-inline: var(--space-2);
    border-bottom-color: transparent;
  }

  /* Tappable catalog rows (checkouts/holds/saved titles) — opens the item's full detail view.
     The action button (Renew/Cancel/Remove) sits beside the card, not inside its tap target;
     each button's own click handler stops propagation so tapping it doesn't also open the item. */
  &.is-tappable { cursor: pointer; }
  &.is-tappable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

  /* library-item-card as a flex child of .item-row — it's display:block/width:100% by default
     (sized for a full-width list container elsewhere), so it needs flex:1/min-width:0 here to
     share the row with an action button instead of overflowing it. */
  & .item-row-card { flex: 1; min-width: 0; }

  & .item-main { display: flex; flex-direction: column; min-width: 0; }
  & .item-title { font-size: .9rem; font-weight: 700; color: var(--ink); }
  & .item-detail { font-size: .78rem; color: var(--ink-muted); }
  & .item-amount { font-weight: 700; font-size: .9rem; color: var(--accent); }
}

/* ---- Event surface panel (city calendar) --------------------------------- */
/* Rows and detail render inside the shared <calendar-event-row> (shadow DOM); this panel gives
   them the same white surface they sit on in the facility sheet, so both pages read identically.
   Edge-to-edge on purpose — it's a mobile app, the surface runs to the screen sides. */
.event-panel {
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-block: 1px solid var(--line);

  &.is-detail { padding: var(--space-4); }

  /* The panel's border closes the group — the last row's own divider would double it */
  & calendar-event-row:last-child::part(row) { border-bottom-color: transparent; }
}

/* ---- Directory card: Places list --------------------------------------- */
.directory-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);

  @container app (min-width: 700px) {
    & { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
  }
}

.directory-card {
  position: relative;
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;

  & .directory-photo {
    display: block;
    width: 4.6rem;
    height: 3.7rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #dfe5ee, #c9d3e3) center/cover no-repeat;
  }
  & .directory-body { display: flex; flex-direction: column; min-width: 0; }
  & .directory-name { font-size: .98rem; font-weight: 700; color: var(--ink); }
  & .directory-detail { font-size: .8rem; color: var(--ink-muted); }
  & .directory-status { font-size: .78rem; font-weight: 600; color: var(--success); }

  /* Unpublished viewer — disabled "coming soon" tile */
  &.is-comingsoon { opacity: .6; cursor: default; }
  /* Preview (@auburnal.gov) staff get a working coming-soon link — signal it's clickable. */
  &.is-comingsoon.is-preview { opacity: .75; cursor: pointer; }
  & .directory-soon {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    padding: 2px 8px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-on-brand);
    background: var(--accent);
    border-radius: var(--radius-pill);
  }
}

/* ---- Program Cards & Catalog: Events & Programs Hub -------------------- */
.cv-program-dept {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--ink-on-brand);

  &.is-library { background: #2b5b84; }
  &.is-parks { background: var(--success); }
}

.cv-program-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-4);

  @container app (min-width: 700px) {
    & { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
  }
}

.cv-program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);

  &:hover, &:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklab, var(--brand) 30%, var(--line));
  }

  & .cv-program-media {
    position: relative;
    width: 100%;
    height: 140px;
    background: color-mix(in oklab, var(--brand) 8%, var(--bg));
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    & .cv-program-placeholder {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      color: var(--brand);
      opacity: .4;
      & svg { width: 44px; height: 44px; }
    }
  }

  & .cv-program-media .cv-program-dept {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
  }

  & .cv-program-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  & .cv-program-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
  }

  & .cv-program-sub {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
    line-height: 1.4;
  }

  & .cv-program-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    align-items: center;
    margin-top: var(--space-1);
  }

  & .cv-program-tag {
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--ink-muted);

    &.is-free {
      background: var(--success-bg);
      color: var(--success);
      font-weight: 700;
    }

    &.is-badge {
      background: var(--warning-bg);
      color: #7a5000;
    }
  }

  & .cv-program-session-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.78rem;
    color: var(--ink-muted);
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--line);
  }
}

/* Detail view styling */
.cv-program-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);

  & .cv-program-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    cursor: pointer;
  }

  & .cv-program-hero {
    position: relative;
    width: 100%;
    max-height: 220px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg);

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  & .cv-program-detail-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  & .cv-program-detail-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.25;
  }

  & .cv-program-detail-sub {
    margin: 0;
    font-size: 1rem;
    color: var(--ink-muted);
  }

  & .cv-program-description {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink);
    white-space: pre-line;
  }

  & .cv-program-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg);
    border-radius: var(--radius-md);
  }

  & .cv-program-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;

    & .label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--ink-muted); letter-spacing: 0.03em; }
    & .value { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
  }

  & .cv-program-register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 48px;
    padding: 0.8rem 1.5rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-on-brand);
    background: var(--accent);
    border: 0;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--dur-fast) var(--ease-standard);

    &:hover, &:focus-visible {
      background: color-mix(in oklab, var(--accent) 85%, #000);
    }
  }

  & .cv-program-sessions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    & .session-row {
      padding: var(--space-3);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--surface);

      & .session-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
      & .session-time { font-size: 0.85rem; color: var(--ink-muted); margin-top: 2px; }
      & .session-location { font-size: 0.82rem; color: var(--brand); font-weight: 600; margin-top: 4px; }
      & .session-loc-btn {
        font: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--brand);
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        text-decoration: underline;

        &:hover, &:focus-visible { color: var(--accent); }
      }
    }
  }
}