/* Mesh Hub UK — chrome shared by the tool pages (live messages, live
 * telemetry, statistics, nodes).
 *
 * This file used to be an override layer: the pattern stylesheets underneath
 * it were hardcoded to the pre-redesign dark palette, so almost every rule
 * here was an !important repaint fighting them back to cream. Those
 * stylesheets now read the shared tokens directly, so what is left is the
 * chrome the tool pages actually add - the banner, the heading band, the
 * favourites bar - plus the handful of genuine layout overrides.
 */

@import url('./patterns/site-chrome.css');

body {
    color: var(--mh-text);
    background: var(--mh-bg);
    font-family: var(--mh-font-body);
}

.feed-heading .eyebrow, .card-heading .eyebrow { color: var(--mh-accent); }

/* Filter for the long message list. It used to sit in the controls above the
   map, where it only narrowed the node dropdown - not the list people
   actually read. It now belongs to the feed it filters. */
.feed-hint { display: block; margin-top: .3rem; color: var(--mh-text-muted); font-size: .8rem; }
.feed-filter {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: min(280px, 100%);
}
.feed-filter label {
    display: block;
    color: var(--mh-text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.feed-filter input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--mh-border);
    border-radius: 12px;
    background: var(--mh-field-bg);
    color: var(--mh-text);
}
.feed-filter input:focus {
    border-color: var(--mh-accent);
    box-shadow: 0 0 0 3px var(--mh-accent-wash);
    outline: none;
}
.feed-count { color: var(--mh-text-muted); font-size: .75rem; }
.feed-empty { margin: 0; padding: 1.5rem; color: var(--mh-text-muted); text-align: center; }

@media (max-width: 780px) {
    .feed-heading { display: flex !important; flex-direction: column; align-items: stretch; gap: .9rem; }
}

/* Layout overrides. These fight pattern stylesheets that load after this
   file, so the !important flags are load-order, not colour. Rules below are
   the telemetry-card layout from #21, carried across unchanged - they are
   pure geometry and needed no tokenising. */
.main-feed .feed-list {
    display: flex !important;
    flex-direction: column !important;
    gap: .55rem !important;
    max-height: 680px;
    overflow: auto;
}
.main-feed .telemetry-card {
    display: grid !important;
    grid-template-columns: minmax(130px, .65fr) minmax(160px, .75fr) minmax(135px, .55fr) minmax(0, 2.5fr) !important;
    align-items: center !important;
    gap: .75rem !important;
    min-height: 74px !important;
    height: auto !important;
    /* Not overflow:hidden. The readings wrap to a second row on nodes that
       report a lot, and clipping them cost about a line of data - worse, a
       card is focusable, so focusing one made the browser scroll the hidden
       box and the row appeared to jump. Let the card grow instead. */
    overflow: visible !important;
    padding: .75rem 1rem !important;
}
.main-feed .telemetry-card > .feed-node,
.main-feed .telemetry-card > .feed-meta,
.main-feed .telemetry-card > .type-chip { align-self: center; min-width: 0; }
.main-feed .telemetry-card > .type-chip { width: max-content; max-width: 100%; }
.main-feed .telemetry-card > .reading-grid {
    grid-column: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: .35rem !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.main-feed .telemetry-card .reading { min-width: 0 !important; padding: .45rem .6rem !important; }
.main-feed .telemetry-card .reading b { font-size: .84rem !important; white-space: normal !important; overflow-wrap: anywhere !important; }

/* Keep the map below the page chrome. */
.map-panel, .map-panel #map { z-index: 0 !important; }
.leaflet-pane { z-index: 400; }
.leaflet-control { z-index: 500; }

@media (max-width: 900px) {
    .main-feed .telemetry-card { grid-template-columns: 1fr 1fr !important; }
    .main-feed .telemetry-card > .reading-grid { grid-column: 1 / -1 !important; }
}

button, input, select { font-family: inherit; }

/* Pinned-node bar. It sits between the heading band and <main> as a sibling of
   both, so it takes the same gutter - on clamp() it stopped at 48px and ran
   well wide of the centred column above it. */
.favourite-bar {
    margin: 1rem var(--mh-band-gutter) 0;
    padding: 1rem;
    border: 1px solid var(--mh-accent-line);
    border-radius: 16px;
    background: var(--mh-accent-wash);
}
.favourite-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.favourite-head h2 { margin: 0; font: 700 1rem var(--mh-font-display); }
.favourite-head button, .pin-button {
    padding: .48rem .75rem;
    border: 1px solid var(--mh-accent-line);
    border-radius: 999px;
    color: inherit;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
}
.favourite-head button.active, .pin-button.active {
    color: var(--mh-on-accent);
    background: var(--mh-accent-solid);
}
.favourite-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.favourite-list button {
    padding: .6rem .75rem;
    border: 1px solid var(--mh-accent-line);
    border-radius: 10px;
    color: inherit;
    background: var(--mh-surface);
    cursor: pointer;
    text-align: left;
}
.favourite-list button b, .favourite-list button small { display: block; }
.favourite-list button small { margin-top: .15rem; color: var(--mh-text-muted); }
.empty-favourites { margin: 0; color: var(--mh-text-muted); }

@media (max-width: 640px) {
    .favourite-bar { margin-inline: var(--mh-band-gutter); }
}