/* ── Sensor Plugin ───────────────────────────────────────────────────── */
:root {
    --sx-red:    #E2001A;
    --sx-red-bg: #fce8ea;
    --sx-border: #e8eaed;
    --sx-muted:  #888;
    --sx-text:   #202124;
}
.sensor-plugin { font-family: inherit; color: var(--sx-text); }

/* ── Shared card ─────────────────────────────────────────────────────── */
.sensor-card {
    background: #fff;
    border: 1px solid var(--sx-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: .75rem;
}

/* ── Shared section label ────────────────────────────────────────────── */
.sensor-section-label {
    margin: 0 0 .9rem;
    font-size: .72rem; font-weight: 600;
    color: var(--sx-muted); text-transform: uppercase; letter-spacing: .06em;
}

/* ── Shared badge ────────────────────────────────────────────────────── */
.sensor-badge {
    display: inline-block; padding: .2rem .65rem;
    border-radius: 20px; font-size: .74rem;
    background: #f1f3f4; color: #555;
}
.sensor-badge--green { background: #e8f5e9; color: #2e7d32; }

/* ── Shared busy levels ──────────────────────────────────────────────── */
.sensor-busy { font-size: .8rem; font-weight: 600; }
.sensor-busy--0 { color: #aaa; }
.sensor-busy--1 { color: #43a047; }
.sensor-busy--2 { color: #7cb342; }
.sensor-busy--3 { color: #fb8c00; }
.sensor-busy--4 { color: #e53935; }
.sensor-busy--5 { color: #b71c1c; }

/* ── LIST ────────────────────────────────────────────────────────────── */
.sensor-list__filter-wrap { margin-bottom: .85rem; }
.sensor-list__filter {
    width: 100%; max-width: 320px;
    padding: .45rem .75rem;
    border: 1px solid var(--sx-border); border-radius: 8px;
    font-size: .9rem; color: var(--sx-text);
    outline: none; box-sizing: border-box;
    transition: border-color .15s;
}
.sensor-list__filter:focus { border-color: var(--sx-red); }
.sensor-list__grid {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .75rem;
}
.sensor-list__empty { color: var(--sx-muted); }

.sensor-card--link {
    display: flex; align-items: center; gap: 1rem;
    text-decoration: none; color: inherit;
    transition: box-shadow .15s, border-color .15s;
    cursor: pointer;
}
.sensor-card--link:hover {
    border-color: var(--sx-red);
    box-shadow: 0 2px 10px rgba(226,0,26,.1);
}
.sensor-card__icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--sx-red-bg); color: var(--sx-red);
    font-weight: 700; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sensor-card__body   { flex: 1; min-width: 0; }
.sensor-card__name   { display: block; font-size: .95rem; font-weight: 600; }
.sensor-card__type,
.sensor-card__cap    { display: block; font-size: .77rem; color: var(--sx-muted); margin-top: .1rem; }
.sensor-card__arrow  { font-size: 1.5rem; color: #ccc; line-height: 1; }

/* ── DETAIL ──────────────────────────────────────────────────────────── */
.sensor-detail { display: flex; flex-direction: column; gap: .75rem; }

.sensor-detail__back {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .82rem; color: var(--sx-red); text-decoration: none; margin-bottom: .25rem;
}
.sensor-detail__back:hover { text-decoration: underline; }

.sensor-detail__hero {
    display: flex; align-items: center; gap: 1rem; margin-bottom: .25rem;
}
.sensor-detail__hero-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--sx-red-bg); color: var(--sx-red);
    font-weight: 800; font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sensor-detail__title { margin: 0 0 .3rem; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.sensor-detail__meta  { display: flex; flex-wrap: wrap; gap: .35rem; }

/* summary strip */
.sensor-summary-row {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: .5rem; margin-bottom: .25rem;
}
.sensor-summary-item {
    background: #fff; border: 1px solid var(--sx-border);
    border-radius: 10px; padding: .75rem 1rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.sensor-summary-item__label { font-size: .7rem; color: var(--sx-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.sensor-summary-item__value { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.sensor-summary-item__value small { font-size: .7rem; font-weight: 400; color: var(--sx-muted); }

/* weekdays */
.sensor-weekdays { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.sensor-weekdays__btn {
    padding: .3rem .8rem; border: 1px solid #dadce0; border-radius: 20px;
    background: transparent; font-size: .8rem; color: #555;
    cursor: pointer; transition: background .1s, color .1s, border-color .1s;
}
.sensor-weekdays__btn:hover { background: #f5f5f5; }
.sensor-weekdays__btn.is-active { background: var(--sx-red); border-color: var(--sx-red); color: #fff; }

/* chart */
.sensor-chart { position: relative; height: 180px; }
.sensor-chart__hint { margin: .5rem 0 0; font-size: .78rem; color: var(--sx-muted); text-align: center; min-height: 1em; }

/* table */
.sensor-table-wrap { overflow-x: auto; }
.sensor-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.sensor-table th,
.sensor-table td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid #f2f2f2; }
.sensor-table th { font-weight: 600; color: #555; background: #fafafa; font-size: .8rem; }
.sensor-table tbody tr:hover td { background: #fff8f8; }

/* ── EMBED (data-sensor widget) ─────────────────────────────────────── */
.se-wrap {
    display: flex; flex-direction: column;
    width: 100%; height: 100%; overflow: hidden;
}
.se-days {
    display: flex; gap: 2px; flex-shrink: 0;
    padding: 2px 2px 3px;
}
.se-day {
    flex: 1; padding: 1px 0;
    border: 1px solid #ddd; border-radius: 3px;
    background: transparent; font-size: 1.4rem; color: #666;
    cursor: pointer; line-height: 1.4;
    transition: background .1s, color .1s, border-color .1s;
}
.se-day:hover    { background: #f5f5f5; }
.se-day.is-active { background: var(--sx-red); border-color: var(--sx-red); color: #fff; }

.se-chart-wrap { flex: 1; position: relative; min-height: 0; }
.se-canvas     { display: block; width: 100% !important; height: 100% !important; }

/* ── TILE (200×100) ──────────────────────────────────────────────────── */
.sensor-tile {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 200px; height: 100px;
    background: #fff; border: 1px solid var(--sx-border);
    border-radius: 10px; padding: .7rem .85rem;
    text-decoration: none; color: inherit;
    box-sizing: border-box; overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.sensor-tile:hover { border-color: var(--sx-red); box-shadow: 0 2px 8px rgba(226,0,26,.12); }

.sensor-tile__header { display: flex; align-items: center; gap: .45rem; }
.sensor-tile__icon {
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--sx-red-bg); color: var(--sx-red);
    font-size: .7rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sensor-tile__name {
    font-size: .72rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sensor-tile__body { display: flex; align-items: flex-end; justify-content: space-between; }
.sensor-tile__stat { display: flex; align-items: baseline; gap: .2rem; }
.sensor-tile__num  { font-size: 1.4rem; font-weight: 700; color: var(--sx-red); line-height: 1; }
.sensor-tile__unit { font-size: .65rem; color: var(--sx-muted); }
.sensor-tile__right { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.sensor-tile__busy { font-size: .65rem; }
.sensor-tile__peak { font-size: .62rem; color: var(--sx-muted); }