/* LiveFeedsPanel — right-rail panel with 4 tabs (Earthquakes / Disasters /
   Airport WX / Lightning). Each row is click-to-fly via JS interop.
   All sizing uses logical CSS properties so the panel mirrors cleanly in
   RTL (Arabic default, per the design rule).
*/

.ms-livefeeds-tabs {
    display: flex;
    gap: 0;
    background: var(--ms-panel-header);
    border-bottom: 1px solid var(--ms-panel-border);
    flex-shrink: 0;
}
.ms-livefeeds-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
    font-size: 10px;
    font-family: var(--ms-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: var(--ms-cursor-pointer);
    border: none;
    background: transparent;
    color: var(--ms-text-mute);
    border-block-end: 2px solid transparent;
    /* Flex container so the count badge stays visible when the label
       runs out of room (5 tabs in a narrow rail get cramped fast). */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.ms-livefeeds-tab:hover { color: var(--ms-text); }
.ms-livefeeds-tab.active {
    color: var(--ms-text);
    border-block-end-color: var(--ms-accent);
}
.ms-livefeeds-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ms-livefeeds-tab-count {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 5px;
    min-width: 16px;
    text-align: center;
    background: var(--ms-panel-border);
    color: var(--ms-text);
    border-radius: 8px;
}
/* Empty-tab badge stays in the layout but shrinks visually so the
   active / non-empty tabs read as the louder ones without making the
   row look uneven. */
.ms-livefeeds-tab-count.dim {
    background: transparent;
    color: var(--ms-text-mute);
    opacity: 0.55;
}
.ms-livefeeds-tab.active .ms-livefeeds-tab-count {
    background: var(--ms-accent);
    color: var(--ms-bg);
    opacity: 1;
}

.ms-livefeeds-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ms-livefeeds-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    padding: 5px 6px;
    font-size: 12px;
    cursor: var(--ms-cursor-pointer);
    border-block-end: 1px dashed var(--ms-panel-border);
    align-items: baseline;
}
.ms-livefeeds-row:hover { background: var(--ms-panel-header); }
.ms-livefeeds-row:last-child { border-block-end: 0; }

.ms-livefeeds-chip {
    font-family: var(--ms-font-mono);
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid currentColor;
    border-radius: 2px;
    line-height: 1.4;
    text-align: center;
    min-width: 32px;
}
.ms-livefeeds-name {
    color: var(--ms-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-livefeeds-time {
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
    font-size: 10px;
    text-align: end;
    white-space: nowrap;
}

.ms-livefeeds-row.alert .ms-livefeeds-chip { color: var(--ms-alert); }
.ms-livefeeds-row.warn  .ms-livefeeds-chip { color: var(--ms-warn-strong); }
.ms-livefeeds-row.warn-soft .ms-livefeeds-chip { color: var(--ms-warn); }
.ms-livefeeds-row.ok    .ms-livefeeds-chip { color: var(--ms-ok); }
.ms-livefeeds-row.mute  .ms-livefeeds-chip { color: var(--ms-text-mute); }

/* Arabic uses the same Mono-font override the rest of the app does;
   the times + chips already pick up --ms-font-mono so no extra rule
   is needed here — :root[lang|="ar"] in tokens.css handles the swap. */