/*
 * M5 Sites (A-05 list, A-05 · detail, A-05 · add / Edit Site). Site cards are the shared
 * components/_site_card; this file covers the toolbar, the detail page and the Site form.
 *   .site-detail__hero   300px photo hero, radius 32px, left-to-right shade, code pill, 48px name,
 *                        address + license, glass buttons (Change Photo, Edit Site)
 *   .site-kpi            four KPI tiles (radius 26px, 36px values; err / warn / sage tones)
 *   .site-form           Add / Edit Site dialog body; .site-photo-drop is the cover photo drop zone
 */
@layer pages {
  .sites-head { display: contents; }
  .sites-toolbar__sort { margin-left: auto; }
  .sites-results { display: flex; flex-direction: column; }

  /* --- A-05 · detail ---------------------------------------------------------------------- */
  .site-detail {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .site-detail__hero {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: var(--radius-dialog);
    background: var(--color-neutral-300);
  }
  .site-detail__hero--empty { background: var(--color-accent-2-700); }

  .site-detail__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    filter: saturate(0.9) sepia(0.08);
  }
  .site-detail__hero--inactive .site-detail__photo { filter: grayscale(1) contrast(0.9) brightness(1.05); }

  .site-detail__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(30 28 22 / 72%) 0%, rgb(30 28 22 / 25%) 55%, transparent);
  }

  .site-detail__overlay {
    position: absolute;
    right: 36px;
    bottom: 32px;
    left: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
  }

  .site-detail__intro { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .site-detail__code { align-self: flex-start; }
  .site-detail__name {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
  }
  .site-detail__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
  .site-detail__fact { display: flex; align-items: center; gap: 6px; }
  .site-detail__fact .icon { flex: none; font-size: 15px; }

  .site-detail__actions { display: flex; flex: none; gap: 8px; }
  .site-detail__photo-form { display: flex; }
  .site-detail__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }
  .site-detail__action .icon { font-size: 15px; }
  .site-detail__action:hover { background: var(--color-bg); color: var(--color-text); }
  .site-detail__action:focus-within { box-shadow: var(--ring); }
  /* 44px touch targets on phones and touch screens (the desktop design is 40px). */
  @media (max-width: 767px), (pointer: coarse) {
    .site-detail__action { height: 44px; }
  }

  .site-detail__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
  .site-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 20px 22px;
    border-radius: 26px;
    background: var(--color-surface);
  }
  .site-kpi__label { font-size: 13px; font-weight: 700; }
  .site-kpi__value { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
  .site-kpi__sub { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
  .site-kpi--err { background: var(--color-err-soft); color: var(--color-err-text); }
  .site-kpi--warn { background: var(--color-warn-soft); color: var(--color-warn-text); }
  .site-kpi--ok { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }

  .site-detail__panels {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .site-detail__card { gap: 14px; }
  .site-detail__card .btn--sm { height: 36px; }
  .site-detail__rows .rows__item { padding: 11px 0; }
  .site-detail__doc { gap: 10px; }
  .site-detail__doc-icon { flex: none; font-size: 17px; color: var(--color-neutral-700); }
  .site-detail__doc-title { font-size: 14px; font-weight: 700; }
  .site-detail__doc-chev { flex: none; font-size: 16px; color: var(--color-neutral-700); }
  .site-detail__empty {
    margin: 0;
    padding: 11px 0;
    border-top: 1px solid var(--color-hairline);
    color: var(--color-neutral-700);
    font-size: 14px;
    line-height: 1.5;
  }
  .site-detail__mobile-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* --- Add / Edit Site --------------------------------------------------------------------- */
  .site-form { display: flex; flex-direction: column; gap: 20px; }
  .site-form__identity {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 16px;
  }
  .site-form__code { font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
  .site-form__opens { grid-column: 1 / -1; }
  .site-form__status { display: flex; align-items: center; gap: 10px; }
  .site-form__status .icon { font-size: 16px; color: var(--color-neutral-700); }

  .site-photo-drop {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    padding: 10px;
    color: var(--color-text);
    text-align: left;
  }
  .site-photo-drop__thumb {
    width: 96px;
    height: 64px;
    flex: none;
    overflow: hidden;
    border-radius: 14px;
    background: repeating-linear-gradient(135deg, var(--color-neutral-100) 0 8px, var(--color-neutral-200) 8px 16px);
  }
  .site-photo-drop__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .site-photo-drop__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .site-photo-drop__title { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
  .site-photo-drop__hint { font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-700); }
  .site-photo-drop__button { height: 36px; pointer-events: none; }
  .site-photo-drop__button.btn .icon { font-size: 15px; }
  .site-photo-drop .file-drop__error { flex-basis: auto; }

  @media (max-width: 1199px) {
    .site-detail__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-detail__panels { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 767px) {
    .sites-toolbar { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
    .sites-toolbar__sort { margin-left: 0; }

    .site-detail { gap: 16px; }
    .site-detail__hero { height: 260px; border-radius: var(--radius-card); }
    .site-detail__overlay {
      right: 18px;
      bottom: 18px;
      left: 18px;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }
    .site-detail__name { font-size: 28px; }
    .site-detail__facts { font-size: 13px; }
    .site-detail__kpis { gap: 10px; }
    .site-kpi { padding: 16px; border-radius: 22px; }
    /* Two-column tiles: every label reserves two lines so values in a row line up even when one
       label ("Pending acknowledgments") wraps. */
    .site-kpi__label { min-height: calc(2 * 1.3em); line-height: 1.3; }
    .site-kpi__value { font-size: 28px; }

    .site-form__identity { grid-template-columns: minmax(0, 1fr) 96px; }
    .site-photo-drop__thumb { width: 72px; height: 52px; }
    .site-photo-drop__button { display: none; }
  }
}