/* ==========================================================================
   Tomatillo Design — BCC Styles (fixed desktop + better mobile labels)
   ========================================================================== */

/* --- Tokens (fallback to Yak vars) --- */
:root{
  --bcc-radius: var(--yak-radius, 12px);
  --bcc-muted: var(--yak-color-muted, #e5e7eb);
  --bcc-muted-weak: var(--yak-color-muted-weak, #eef1f4);
  --bcc-muted-strong: var(--yak-color-muted-strong, #374151);
  --bcc-fg: var(--yak-color-text, #111827);
  --bcc-bg: var(--yak-color-bg, #ffffff);

  --bcc-success-weak: var(--yak-color-success-weak, #e7f6ea);
  --bcc-success: var(--yak-color-success, #18794e);
  --bcc-warn-weak: var(--yak-color-warn-weak, #fff4dc);
  --bcc-warn: var(--yak-color-warn, #8a5700);
  --bcc-danger-weak: var(--yak-color-danger-weak, #fde8e8);
  --bcc-danger: var(--yak-color-danger, #b42318);

  --bcc-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .06);
}

/* Container */
.bcc-table{ color:var(--bcc-fg); }

/* =========================
   MOBILE (default): cards
   ========================= */
.bcc-table__table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
  margin-top: 2rem;
}

/* Hide table head on mobile; we’ll add labels per cell */
.bcc-table__table thead{ display:none; }

.bcc-table__table tbody{
  display:grid;
  gap:.75rem;
}

/* Card rows */
.bcc-table__table tr{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem .75rem;
  padding:.75rem;
  border:1px solid var(--bcc-muted);
  border-radius:var(--bcc-radius);
  background:var(--yak-color-surface, var(--bcc-bg));
  box-shadow:var(--bcc-shadow);
}

.bcc-table__table td,
.bcc-table__table th{
  border:0;
  padding:0;
}


/* Site title full width, bold */
.bcc-row .bcc-col--site{
  grid-column:1 / -1;
  font-weight:700;
  font-size:1.05rem;
}

/* Turn data cells into label:value pairs */
.bcc-row .bcc-col--status,
.bcc-row .bcc-col--minga,
.bcc-row .bcc-col--age,
.bcc-row .bcc-col--phone,
.bcc-row .bcc-col--county,
.bcc-row .bcc-col--city{
  display:grid;
  grid-template-columns:max-content 1fr;
  align-items:center;
  gap:.25rem .5rem;
}

/* Explicit mobile labels (no attr() fallback funny business) */
.bcc-col--status::before{ content:"Status"; font-weight:600; opacity:.75; }
.bcc-col--minga::before{  content:"Min. GA"; font-weight:600; opacity:.75; }
.bcc-col--age::before{    content:"Days"; font-weight:600; opacity:.75; }
.bcc-row .bcc-col--phone:nth-of-type(1)::before{ content:"NICU Phone"; font-weight:600; opacity:.75; }
.bcc-row .bcc-col--phone:nth-of-type(2)::before{ content:"PLC Phone";  font-weight:600; opacity:.75; }
.bcc-col--county::before{ content:"County";  font-weight:600; opacity:.75; }
.bcc-col--city::before{   content:"City";    font-weight:600; opacity:.75; }

/* Keep phone strings tidy */
.bcc-col--phone{ white-space:nowrap; }

/* Status pill */
.bcc-pill{
  justify-self:start;
  display:inline-block;
  padding:.28rem .6rem;
  border-radius:9999px;
  font-weight:700;
  line-height:1.2;
  font-size:.82rem;
  border:1px solid transparent;
}
.bcc-pill.status--good{    background:var(--bcc-success-weak); color:var(--bcc-success); }
.bcc-pill.status--limited{ background:var(--bcc-warn-weak);    color:var(--bcc-warn); }
.bcc-pill.status--atcap{   background:var(--bcc-danger-weak);  color:var(--bcc-danger); }
.bcc-pill.status--closed{  background:var(--bcc-danger-weak);  color:var(--bcc-danger); text-transform:uppercase; letter-spacing:.02em; }
.bcc-pill.status--unknown{ background:var(--bcc-muted-weak);   color:var(--bcc-muted-strong); }

/* Optional subtle tint for whole card */
.bcc-row.status--good{    background:color-mix(in sRGB, var(--bcc-success-weak) 18%, transparent); }
.bcc-row.status--limited{ background:color-mix(in sRGB, var(--bcc-warn-weak) 18%, transparent); }
.bcc-row.status--atcap{   background:color-mix(in sRGB, var(--bcc-danger-weak) 14%, transparent); }
.bcc-row.status--closed{  background:color-mix(in sRGB, var(--bcc-danger-weak) 20%, transparent); }
.bcc-row.status--unknown{ background:color-mix(in sRGB, var(--bcc-muted-weak) 16%, transparent); }

/* =========================
   ≥640px: real table mode
   ========================= */
@media (min-width:640px){
  .bcc-table{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:var(--bcc-radius);
    box-shadow:var(--bcc-shadow);
    border:1px solid var(--bcc-muted);
    background:var(--bcc-bg);
  }

  .bcc-table__table{
    min-width:980px;
    border-collapse:separate;
    border-spacing:0;
  }

  /* Bring back the header */
  .bcc-table__table thead{
    display:table-header-group;
    position:sticky;
    inset-block-start:0;
    z-index:2;
    background:var(--bcc-bg);
    box-shadow:0 1px 0 var(--bcc-muted);
  }

  /* Reset all the mobile “grid card” rules */
  .bcc-table__table tbody{ display:table-row-group; }
  .bcc-table__table tr{ display:table-row; padding:0; border:0; background:transparent; box-shadow:none; }
  .bcc-table__table td,
  .bcc-table__table th{
    display:table-cell;
    padding:.6rem .75rem;
    border-bottom:1px solid var(--bcc-muted);
    vertical-align:middle;
    white-space:nowrap;
  }
  .bcc-row .bcc-col--site{ font-weight:700; font-size:var(--yak-font-sm); grid-column:auto; }
  .bcc-row .bcc-col--status,
  .bcc-row .bcc-col--minga,
  .bcc-row .bcc-col--age,
  .bcc-row .bcc-col--phone,
  .bcc-row .bcc-col--county,
  .bcc-row .bcc-col--city{ display:table-cell; grid-template-columns:none; }

  /* Remove the pseudo-labels in table mode */
  .bcc-col--status::before,
  .bcc-col--minga::before,
  .bcc-col--age::before,
  .bcc-row .bcc-col--phone:nth-of-type(1)::before,
  .bcc-row .bcc-col--phone:nth-of-type(2)::before,
  .bcc-col--county::before,
  .bcc-col--city::before{ content:none !important; }

  /* Hover nicety */
  .bcc-table__table tbody tr:hover{
    background:color-mix(in sRGB, var(--bcc-muted-weak) 35%, transparent);
  }
}

/* =========================
   ≥1024px niceties
   ========================= */
@media (min-width:1024px){
  .bcc-table__table th{ font-weight:700; }
  .bcc-table__table tbody tr:nth-child(even){
    background:color-mix(in sRGB, var(--bcc-muted-weak) 22%, transparent);
  }
}

/* A11y + print */
.bcc-table__table :is(th,td):focus-within{
  outline:2px solid var(--yak-color-accent, #3b82f6);
  outline-offset:-2px;
}
@media print{
  .bcc-table{ box-shadow:none; border:0; }
  .bcc-table__table{ font-size:11px; }
  .bcc-table__table th,.bcc-table__table td{ padding:4px 6px; border-color:#bbb; }
  .bcc-pill{ border:1px solid currentColor; }
}


.bcc-phone-link {
  color: inherit;              /* don’t look like giant blue links */
  text-decoration: none;
}
.bcc-phone-link:hover,
.bcc-phone-link:focus {
  text-decoration: underline;  /* subtle affordance */
}
@media (max-width: 639px) {
  .bcc-phone-link {
    font-size: 1rem;
    font-weight: 500;
    text-decoration: underline;
  }
}


/* Hide the status column completely on mobile */
@media (max-width: 768px) {
    .bcc-col--status {
        display: none !important;
    }

    .bcc-col--site {
        position: relative;
        padding-bottom: 2.5rem; /* space for pill */
    }

    .bcc-col--site::after {
        content: attr(data-status);
        display: block;
        width: 100%;
        margin-top: 0.5rem;
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.875rem;
        text-align: center;
    }

    /* Color classes — match your desktop pills */
    .bcc-col--site[data-status-cls~="status--good"]::after {
        background: #e6f9ef;
        color: #107c41;
    }
    .bcc-col--site[data-status-cls~="status--atcap"]::after {
        background: #fdecea;
        color: #d93025;
    }
    .bcc-col--site[data-status-cls~="status--limited"]::after {
        background: #fff7e6;
        color: #b76e00;
    }
    .bcc-col--site[data-status-cls~="status--closed"]::after {
        background: #f0f0f0;
        color: #555;
    }

}


/* Hide inline labels on desktop */
@media (min-width: 640px) {
  .bcc-cell .bcc-label {
    display: none;
  }
}

/* Show inline labels stacked on mobile */
@media (max-width: 639px) {
  .bcc-cell.bcc-col--phone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .bcc-cell .bcc-label {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.8;
  }
  .bcc-cell .bcc-value {
    font-size: 1rem;
    font-weight: 500;
  }
}



/* ============================================
   Equal-width columns + wrapping (desktop)
   ============================================ */
@media (min-width: 640px) {
  .bcc-table {
    overflow-x: visible; /* no sneaky scrollbars */
  }

  .bcc-table__table {
    width: 100%;
    table-layout: fixed;          /* forces equal column sizing */
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Make every column the same width */
  .bcc-table__table thead th {
    width: calc(100% / 8);        /* 8 columns total */
  }

  /* Let content wrap naturally so nothing forces overflow */
  .bcc-table__table th,
  .bcc-table__table td {
    white-space: normal !important;
    overflow-wrap: anywhere;      /* break long tokens (phones, long names) */
    word-break: break-word;
    padding: 0.45rem 0.55rem;     /* slightly compact to help fit */
    font-size: 0.9rem;
    line-height: 1.25;
  }

  /* Keep status pill compact so it doesn't balloon a column */
  .bcc-pill {
    padding: 0.14rem 0.42rem;
    font-size: 0.78rem;
    line-height: 1.1;
    border-radius: 9999px;
  }

  /* Phone links look like text but remain clickable */
  .bcc-phone-link {
    color: inherit;
    text-decoration: none;
  }
  .bcc-phone-link:hover,
  .bcc-phone-link:focus {
    text-decoration: underline;
  }
}

/* Mobile card view remains as-is (labels + full-width pill under site). */