/* Styles for the inbound-server-connection debug dialog.
   Kept visually consistent with modbusDebugDialog (uses the same
   tab strip + KPI tile + bar conventions) but with its own
   class-name namespace so future style changes to one don't
   cascade into the other.

   Responsive: the dialog can be opened in a narrow viewport (mobile,
   resized window). The KPI grid auto-fits via minmax(min(...)), the
   header card collapses to a stacked label/value pair below 520px,
   the breakdown / raw rows do the same, and the timeline table
   becomes a horizontal-scrolling region rather than overflowing the
   dialog. Tile values wrap on overflow with a smaller font-size so
   long labels (e.g. GATEWAY_PATH_UNAVAILABLE) stay legible.            */

.mbusSrvDbg {
    box-sizing: border-box;
    /* SMDUIDialog's title-bar sets a white text colour that cascades
       into the dialog body unless we reset it explicitly. Without this
       reset, any element that doesn't set its own colour (notably the
       bar's <button> and <select> elements, plus the timeline status
       line) renders white-on-white and looks empty.                     */
    color: #2a2f36;
}
.mbusSrvDbg *,
.mbusSrvDbg *::before,
.mbusSrvDbg *::after {
    box-sizing: border-box;
}

.mbusSrvDbg-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid #e7e7e7;
    background: #fafafa;
}
/* hh.button() auto-tags every native <button> with class "smdui-button"
   and the dialog title-bar's white text colour cascades down into the
   body via the SMDUIDialog widget — so we explicitly pin the button
   colour, background, font, and line-height here to keep our bar
   buttons visible regardless of the host context.                        */
.mbusSrvDbg-bar button,
.mbusSrvDbg-bar button.smdui-button {
    padding: 4px 12px;
    border: 1px solid #c0c8d0;
    background: #fff;
    color: #2a2f36;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}
.mbusSrvDbg-bar button:hover,
.mbusSrvDbg-bar button.smdui-button:hover {
    background: #f0f4f8;
    color: #2a2f36;
}
.mbusSrvDbg-bar button:disabled,
.mbusSrvDbg-bar button.smdui-button:disabled {
    color: #888;
    background: #f4f4f4;
    cursor: not-allowed;
}
.mbusSrvDbg-bar-label {
    font-size: 12px;
    color: #555;
    margin-right: 4px;
}
.mbusSrvDbg-bar select {
    padding: 3px 6px;
    border: 1px solid #c0c8d0;
    background: #fff;
    color: #2a2f36;
    border-radius: 3px;
    font-size: 12px;
}
.mbusSrvDbg-hint {
    color: #666;
    font-size: 11px;
    margin-left: 8px;
    line-height: 1.4;
    flex: 1;
}

/* Identity card at the top of Overview */
.mbusSrvDbg-header-card {
    margin: 12px;
    border: 1px solid #d0d8e0;
    border-radius: 4px;
    background: #f7faff;
    font-size: 12px;
}
.mbusSrvDbg-header-row {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px dashed #e0e6ec;
}
.mbusSrvDbg-header-row:last-child { border-bottom: none; }
.mbusSrvDbg-header-k {
    color: #555;
    font-weight: 500;
}
.mbusSrvDbg-header-v {
    color: #222;
    font-family: monospace;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}
@media (max-width: 520px) {
    .mbusSrvDbg-header-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}
.mbusSrvDbg-conn-closed {
    padding: 16px;
    color: #a04040;
    font-style: italic;
}

/* KPI tiles — responsive auto-fit grid. The min(220px, 100%) on the
   minmax track stops a single tile from forcing horizontal overflow
   on very narrow viewports (where 220px is wider than the dialog).
   Tile values use a clamped font-size + word-break so long labels
   like "GATEWAY_PATH_UNAVAILABLE" wrap cleanly instead of clipping
   with an ellipsis the user cannot resolve. */
.mbusSrvDbg-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 10px;
    padding: 12px;
}
.mbusSrvDbg-tile {
    background: #fafafa;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    padding: 12px 14px;
    min-height: 86px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mbusSrvDbg-tile-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.mbusSrvDbg-tile-value {
    font-size: clamp(15px, 2.4vw, 22px);
    font-weight: 600;
    color: #333;
    margin: 4px 0;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}
.mbusSrvDbg-tile-value.ok   { color: #2ca02c; }
.mbusSrvDbg-tile-value.warn { color: #f0a020; }
.mbusSrvDbg-tile-value.bad  { color: #d62728; }
.mbusSrvDbg-tile-sub {
    font-size: 11px;
    color: #666;
    word-break: break-word;
}

/* Breakdowns tab — per-FC / per-slave / per-exception tables */
.mbusSrvDbg-breakdowns {
    padding: 0 12px 12px 12px;
}
.mbusSrvDbg-bk-block {
    margin-top: 12px;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    overflow: hidden;
}
.mbusSrvDbg-bk-title {
    padding: 8px 12px;
    font-weight: 600;
    color: #444;
    background: #f5f5f5;
    border-bottom: 1px solid #e7e7e7;
}
.mbusSrvDbg-bk-empty {
    padding: 12px;
    color: #888;
    font-style: italic;
    font-size: 12px;
}
.mbusSrvDbg-bk-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(60px, 100px) minmax(50px, 80px);
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px dashed #f0f0f0;
    font-size: 12px;
    align-items: center;
}
.mbusSrvDbg-bk-row:last-child { border-bottom: none; }
.mbusSrvDbg-bk-k {
    font-family: monospace;
    color: #333;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}
.mbusSrvDbg-bk-v {
    text-align: right;
    font-family: monospace;
    font-weight: 600;
}
.mbusSrvDbg-bk-pct {
    text-align: right;
    color: #888;
    font-size: 11px;
}
@media (max-width: 420px) {
    .mbusSrvDbg-bk-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "k v"
            "k pct";
    }
    .mbusSrvDbg-bk-k   { grid-area: k; }
    .mbusSrvDbg-bk-v   { grid-area: v; }
    .mbusSrvDbg-bk-pct { grid-area: pct; }
}

/* Timeline */
.mbusSrvDbg-tl-status {
    padding: 10px 12px;
    color: #555;
    font-size: 12px;
}
.mbusSrvDbg-tl-status-rec {
    color: #d62728;
    font-weight: 600;
}
.mbusSrvDbg-tl-status-done {
    color: #2ca02c;
}
.mbusSrvDbg-tl-status-idle {
    color: #888;
    font-style: italic;
}
/* Timeline table: many narrow fixed columns that don't usefully
   collapse. Wrap it in a horizontal-scroll container instead of
   trying to reflow per-cell — the row stays readable as a single
   line and the dialog body never overflows. */
.mbusSrvDbg-tl-table {
    padding: 0 12px 12px 12px;
    font-size: 11px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mbusSrvDbg-tl-row {
    display: grid;
    grid-template-columns: 30px 100px 70px 80px 200px 130px 200px 60px;
    min-width: 870px;  /* sum of the columns above */
    padding: 4px 0;
    border-bottom: 1px dashed #f0f0f0;
}
.mbusSrvDbg-tl-head {
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid #c0c8d0;
}
.mbusSrvDbg-tl-cell {
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 4px;
}
.mbusSrvDbg-tl-cell.ok  { color: #2ca02c; }
.mbusSrvDbg-tl-cell.bad { color: #d62728; }

/* Raw */
.mbusSrvDbg-raw {
    padding: 0 12px 12px 12px;
    font-size: 12px;
}
.mbusSrvDbg-raw-row {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed #f0f0f0;
}
.mbusSrvDbg-raw-key {
    color: #666;
}
.mbusSrvDbg-raw-val {
    font-family: monospace;
    word-break: break-all;
    overflow-wrap: anywhere;
    min-width: 0;
}
@media (max-width: 520px) {
    .mbusSrvDbg-raw-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}