/* 2.82.0 Custom wallboards: the widgets' grid (on the screen and in the editor) and the editor's controls. Its own colours,
   dark or light per board, so it looks the same in the panel and on the screen. */
.wbx {
  --x-bg: #0D1418; --x-panel: #16212A; --x-line: #26343F; --x-ink: #EEF3F6; --x-muted: #93A4B1;
  --x-good: #34D399; --x-warn: #FBBF24; --x-bad: #F87171; --x-info: #60A5FA;
  color-scheme: dark;
}
.wbx.light { --x-bg: #EEF2F5; --x-panel: #FFFFFF; --x-line: #D3D9E0; --x-ink: #12202A; --x-muted: #5E6B78; --x-good: #047857; --x-warn: #B45309; --x-bad: #B91C1C; --x-info: #1D4ED8; color-scheme: light; }
.wbx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 10px; background: var(--x-bg); color: var(--x-ink); padding: 10px; border-radius: 12px; position: relative; min-height: 120px; }
/* the screen: the rows fill it */
.wbx-tv { grid-auto-rows: max(60px, calc((100vh - 110px - (var(--rows, 6) - 1) * 10px) / var(--rows, 6))); padding: 0; background: transparent; }
.wbx-w { background: var(--x-panel); border: 1px solid var(--x-line); border-radius: 12px; padding: 8px 12px; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.wbx-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--x-muted); font-size: clamp(.75rem, 1vw, 1.05rem); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; min-height: 1.4em; }
.wbx-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbx-b { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; justify-content: center; }
.wbx-v { font-size: clamp(1.6rem, 3.6vw, 4.2rem); font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wbx-l, .wbx-sub, .wbx-cmp { color: var(--x-muted); font-size: clamp(.75rem, .95vw, 1rem); }
.wbx-none { color: var(--x-muted); margin: 0; }
.wbx-ok { color: var(--x-good); }
.wbx-empty { grid-column: 1 / -1; text-align: center; padding: 24px; }
.wbx-warn { border-color: var(--x-warn); } .wbx-warn > .wbx-b .wbx-v, .wbx-warn > .wbx-b > .wbx-v { color: var(--x-warn); }
.wbx-bad { border-color: var(--x-bad); background: color-mix(in srgb, var(--x-bad) 12%, var(--x-panel)); } .wbx-bad > .wbx-b > .wbx-v { color: var(--x-bad); }
.wbx-flash { animation: wbx-flash 1.2s ease-in-out infinite; }
@keyframes wbx-flash { 50% { background: color-mix(in srgb, var(--x-bad) 35%, var(--x-panel)); } }
@media (prefers-reduced-motion: reduce) { .wbx-flash, .wbx-ticker-in { animation: none !important; } }
/* no update for 30 s: grey */
.wbx-stale .wbx-w { filter: grayscale(1); opacity: .55; }
/* a ring */
.wbx-ring { width: 100%; height: 100%; max-height: 100%; }
.wbx-ring .bg { fill: none; stroke: var(--x-line); stroke-width: 10; }
.wbx-ring .fg { fill: none; stroke: var(--x-good); stroke-width: 10; stroke-linecap: round; }
.wbx-ring.wbx-warn .fg { stroke: var(--x-warn); } .wbx-ring.wbx-bad .fg { stroke: var(--x-bad); }
.wbx-ring text { fill: var(--x-ink); font-size: 20px; font-weight: 600; }
/* tables */
.wbx-table { width: 100%; border-collapse: collapse; font-size: clamp(.8rem, 1.1vw, 1.25rem); align-self: start; }
.wbx-table th, .wbx-table td { padding: 4px 8px; text-align: start; border-bottom: 1px solid var(--x-line); }
.wbx-table th { color: var(--x-muted); font-weight: 500; font-size: .8em; }
.wbx-table td.n { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.wbx-table tr.wbx-warn td.n { color: var(--x-warn); } .wbx-table tr.wbx-bad td.n { color: var(--x-bad); }
.wbx-b:has(.wbx-table), .wbx-b:has(.wbx-agents), .wbx-b:has(.wbx-bars), .wbx-b:has(.wbx-alerts) { justify-content: flex-start; }
/* agents */
.wbx-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.wbx-agent { border: 1px solid var(--x-line); border-inline-start: 4px solid var(--x-muted); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; font-size: clamp(.8rem, 1vw, 1.1rem); }
.wbx-agent.s-available { border-inline-start-color: var(--x-good); }
.wbx-agent.s-on_call, .wbx-agent.s-ringing { border-inline-start-color: var(--x-info); }
.wbx-agent.s-paused, .wbx-agent.s-away, .wbx-agent.s-dnd, .wbx-agent.s-after_call_work { border-inline-start-color: var(--x-warn); }
.wbx-agent.wbx-warn { background: color-mix(in srgb, var(--x-warn) 14%, var(--x-panel)); }
.wbx-agent.wbx-bad { background: color-mix(in srgb, var(--x-bad) 18%, var(--x-panel)); border-color: var(--x-bad); }
.wbx-agent .st, .wbx-agent .rs, .wbx-agent .qs, .wbx-agent .call { color: var(--x-muted); }
.wbx-agent .dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: currentColor; margin-inline-end: 4px; }
/* bars and trend */
.wbx-bars { display: flex; flex-direction: column; gap: 6px; }
.wbx-bar { display: grid; grid-template-columns: minmax(60px, 1fr) 3fr auto; align-items: center; gap: 8px; }
.wbx-bar .track { position: relative; height: 14px; background: var(--x-line); border-radius: 7px; overflow: hidden; }
.wbx-bar .fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--x-good); }
.wbx-bar.wbx-warn .fill { background: var(--x-warn); } .wbx-bar.wbx-bad .fill { background: var(--x-bad); }
.wbx-line { position: absolute; inset-block: -2px; width: 2px; } .wbx-line.w { background: var(--x-warn); } .wbx-line.b { background: var(--x-bad); }
.wbx-bar .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.wbx-trend { width: 100%; flex: 1; min-height: 40px; }
.wbx-trend .c { fill: var(--x-info); } .wbx-trend .p { stroke: var(--x-muted); stroke-width: 1.5; stroke-dasharray: 3 2; }
.wbx-trend text { fill: var(--x-muted); font-size: 8px; }
/* small tiles inside a widget */
.wbx-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.wbx-mini .wbx-v { font-size: clamp(1.3rem, 2.4vw, 2.8rem); }
.wbx-mini.wbx-warn .wbx-v { color: var(--x-warn); } .wbx-mini.wbx-bad .wbx-v { color: var(--x-bad); }
.wbx-clock { font-size: clamp(1.6rem, 3.4vw, 4rem); font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; }
.wbx-alerts { display: flex; flex-wrap: wrap; gap: 6px; }
.wbx-alert { border: 1px solid var(--x-bad); color: var(--x-bad); border-radius: 8px; padding: 2px 8px; }
/* the ticker: scrolls when it is longer than the widget */
.wbx-ticker { overflow: hidden; white-space: nowrap; font-size: clamp(1rem, 1.6vw, 1.8rem); }
.wbx-ticker-in { display: inline-block; padding-inline-start: 100%; animation: wbx-ticker 22s linear infinite; }
[dir="rtl"] .wbx-ticker-in, .wbx-ticker-in[dir="rtl"] { animation-name: wbx-ticker-rtl; }
@keyframes wbx-ticker { to { transform: translateX(-100%); } }
@keyframes wbx-ticker-rtl { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .wbx-ticker { white-space: normal; } .wbx-ticker-in { padding-inline-start: 0; } }
/* the editor */
.wbx-edit { background-image: linear-gradient(to right, color-mix(in srgb, var(--x-line) 60%, transparent) 1px, transparent 1px); background-size: calc((100% - 20px + 10px) / 12) 100%; background-position: 10px 0; }
.wbx-edit .wbx-h { cursor: grab; touch-action: none; }
.wbx-edit.wbx-locked .wbx-h { cursor: default; }
.wbx-edit .wbx-w:focus-within, .wbx-edit .wbx-w:focus { outline: 2px solid var(--x-info); outline-offset: 1px; }
.wbx-drag { opacity: .85; outline: 2px dashed var(--x-info); z-index: 2; }
.wbx-tools { display: none; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.wbx-edit .wbx-w:hover .wbx-tools, .wbx-edit .wbx-w:focus-within .wbx-tools { display: flex; }
.wbx-mini-btn { background: var(--x-bg); color: var(--x-ink); border: 1px solid var(--x-line); border-radius: 5px; min-width: 22px; height: 22px; padding: 0 3px; font-size: 12px; line-height: 1; cursor: pointer; text-transform: none; }
.wbx-rs { position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--x-muted) 50%); border-end-end-radius: 12px; }
[dir="rtl"] .wbx-rs { cursor: nesw-resize; background: linear-gradient(225deg, transparent 50%, var(--x-muted) 50%); }
.wbx-toolbar { flex-wrap: wrap; align-items: end; gap: 8px; }
.wbx-name input { min-width: 200px; }
.wbx-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.wbx-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 8px 12px; }
.wbx-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.wbx-cat-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; padding: 10px; }
.wbx-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 8px; }
.wbx-num { max-width: 110px; }
.wbx-st { min-width: 130px; }
@media (max-width: 700px) {
  .wbx-grid:not(.wbx-edit) { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .wbx-grid:not(.wbx-edit) .wbx-w { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 90px; }
}