@section('title', 'Administração')
@include('admin/includes/header')

@verbatim
<style>
.dash-root {
    --dash-card: #ffffff;
    --dash-border: rgba(16,24,40,.08);
    --dash-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -16px rgba(16,24,40,.18);
    --dash-shadow-hover: 0 1px 2px rgba(16,24,40,.06), 0 18px 36px -18px rgba(16,24,40,.28);
    --dash-text: #101828;
    --dash-muted: #667085;
    --dash-track: #eef1f5;
    --dash-skel-a: #e9edf2;
    --dash-skel-b: #f6f8fa;
    --c-pub: #12b76a;
    --c-rev: #f79009;
    --c-pend: #2e90fa;
    --c-dis: #f04438;
    --c-wait: #7a5af8;
    --c-idle: #98a2b3;
    --c-off: #475467;
	--bs-body-bg: #16191f;

    display: block;
    color: var(--dash-text);
    font-size: 15px;
    padding: 18px 0 40px;
    -webkit-font-smoothing: antialiased;
}

[data-bs-theme="dark"] .dash-root,
.dark .dash-root {
    --dash-card: #16191f;
    --dash-border: rgba(255,255,255,.09);
    --dash-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.6);
    --dash-shadow-hover: 0 1px 2px rgba(0,0,0,.5), 0 18px 36px -18px rgba(0,0,0,.8);
    --dash-text: #e7eaee;
    --dash-muted: #98a2b3;
    --dash-track: #23272f;
    --dash-skel-a: #23272f;
    --dash-skel-b: #2c313a;
    --c-off: #667085;
}

.dash-root .dash-wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.dash-root *,
.dash-root *::before,
.dash-root *::after { box-sizing: border-box; }

.dash-root p { margin: 0; }

.dash-root .dash-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.dash-root .dash-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.2;
}

.dash-root .dash-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .81rem;
    color: var(--dash-muted);
    margin-top: 4px;
}

.dash-root .dash-status .pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-idle);
    flex: 0 0 auto;
}
.dash-root .dash-status[data-state="loading"] .pip { background: var(--c-pend); animation: dash-pulse 1.1s ease-in-out infinite; }
.dash-root .dash-status[data-state="ok"] .pip { background: var(--c-pub); }
.dash-root .dash-status[data-state="partial"] .pip { background: var(--c-rev); }

.dash-root .dash-tools { display: flex; align-items: center; gap: 8px; }

.dash-root .dash-bell {
    border: 1px solid var(--dash-border);
    background: var(--dash-card);
    color: var(--c-rev);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.dash-root .dash-bell[data-on="1"] {
    border-color: rgba(247,144,9,.42);
    background: rgba(247,144,9,.08);
}
.dash-root .dash-bell[data-on="0"] { color: var(--dash-muted); }
.dash-root .dash-bell:hover { border-color: var(--c-rev); }

.dash-root .dash-theme {
    border: 1px solid var(--dash-border);
    background: var(--dash-card);
    color: var(--dash-muted);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.dash-root .dash-theme:hover { border-color: var(--c-pend); color: var(--c-pend); transform: translateY(-1px); }

.dash-root .dash-refresh {
    border: 1px solid var(--dash-border);
    background: var(--dash-card);
    color: var(--dash-text);
    border-radius: 10px;
    padding: 9px 15px;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dash-root .dash-refresh:hover { box-shadow: var(--dash-shadow); transform: translateY(-1px); }
.dash-root .dash-refresh[data-busy="1"] { opacity: .6; cursor: default; }
.dash-root .dash-refresh[data-busy="1"] i { animation: dash-spin .9s linear infinite; }

.dash-root .dash-toasts {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 330px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding-right: 2px;
}

.dash-root .dash-toast {
    background: var(--dash-card);
    border: 1px solid var(--dash-border);
    border-left: 3px solid var(--c-rev);
    border-radius: 12px;
    box-shadow: 0 8px 28px -8px rgba(16,24,40,.35);
    padding: 12px 14px;
    animation: dash-toast-in .35s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    flex: 0 0 auto;
}
.dash-root .dash-toast:hover { color: inherit; text-decoration: none; border-color: rgba(247,144,9,.45); }
.dash-root .dash-toast.out { animation: dash-toast-out .3s ease forwards; }
.dash-root .dash-toast.initial { border-left-color: var(--c-pend); }
.dash-root .dash-toast.initial:hover { border-color: rgba(46,144,250,.45); }
.dash-root .dash-toast.initial .dash-toast-head i { color: var(--c-pend); }

.dash-root .dash-toast-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dash-muted);
    margin-bottom: 8px;
}
.dash-root .dash-toast-head i { color: var(--c-rev); font-size: .85rem; }
.dash-root .dash-toast-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--dash-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 3px;
}
.dash-root .dash-toast-close:hover { color: var(--dash-text); }

.dash-root .dash-toast-body {
    display: flex;
    align-items: baseline;
    gap: 9px;
}
.dash-root .dash-toast-num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--c-rev);
    flex: 0 0 auto;
}
.dash-root .dash-toast.initial .dash-toast-num { color: var(--c-pend); }
.dash-root .dash-toast-label { font-size: .81rem; line-height: 1.35; }

.dash-root .dash-toast small {
    display: block;
    margin-top: 9px;
    font-size: .71rem;
    color: var(--dash-muted);
}

@keyframes dash-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes dash-toast-out { to { opacity: 0; transform: translateX(24px); } }

.dash-root .dash-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.dash-root .dash-action {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--dash-card);
    border: 1px solid var(--dash-border);
    border-left: 3px solid var(--c-idle);
    border-radius: 12px;
    padding: 13px 15px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dash-root .dash-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-hover);
    color: inherit;
    text-decoration: none;
}
.dash-root .dash-action[data-tone="clear"] { border-left-color: var(--c-pub); }
.dash-root .dash-action[data-tone="warn"] { border-left-color: var(--c-rev); background: rgba(247,144,9,.045); }
.dash-root .dash-action[data-tone="urgent"] { border-left-color: var(--c-dis); background: rgba(240,68,56,.05); }

.dash-root .dash-action-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.dash-root .dash-action-num {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.dash-root .dash-action[data-tone="warn"] .dash-action-num { color: #b54708; }
.dash-root .dash-action[data-tone="urgent"] .dash-action-num { color: #b42318; }
[data-bs-theme="dark"] .dash-root .dash-action[data-tone="warn"] .dash-action-num { color: #fdb022; }
[data-bs-theme="dark"] .dash-root .dash-action[data-tone="urgent"] .dash-action-num { color: #fda29b; }

.dash-root .dash-action-tag {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(240,68,56,.14);
    color: #b42318;
}
[data-bs-theme="dark"] .dash-root .dash-action-tag { color: #fda29b; }
.dash-root .dash-action-tag[hidden] { display: none; }

.dash-root .dash-action-label {
    display: block;
    font-size: .76rem;
    color: var(--dash-muted);
    margin-top: 6px;
    line-height: 1.35;
}

.dash-root .dash-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}
.dash-root .g6 { grid-column: span 6; }
.dash-root .g4 { grid-column: span 4; }
.dash-root .g3 { grid-column: span 3; }
.dash-root .g12 { grid-column: span 12; }

.dash-root .dash-card {
    background: var(--dash-card);
    border: 1px solid var(--dash-border);
    border-radius: 16px;
    box-shadow: var(--dash-shadow);
    height: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-color .2s ease;
}
.dash-root a.dash-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dash-shadow-hover);
    border-color: rgba(46,144,250,.35);
    color: inherit;
    text-decoration: none;
}
.dash-root .dash-card[data-alert="1"] {
    border-color: rgba(240,68,56,.42);
    box-shadow: var(--dash-shadow), 0 0 0 3px rgba(240,68,56,.07);
}

.dash-root .dash-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.dash-root .dash-label {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dash-muted);
}

.dash-root .dash-sub {
    font-size: .79rem;
    color: var(--dash-muted);
    margin-top: 3px;
}

.dash-root .dash-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(46,144,250,.1);
    color: #2e90fa;
    flex: 0 0 auto;
}
.dash-root .dash-icon.tone-green { background: rgba(18,183,106,.1); color: var(--c-pub); }
.dash-root .dash-icon.tone-amber { background: rgba(247,144,9,.12); color: var(--c-rev); }
.dash-root .dash-icon.tone-red { background: rgba(240,68,56,.1); color: var(--c-dis); }
.dash-root .dash-icon.tone-violet { background: rgba(122,90,248,.12); color: var(--c-wait); }
.dash-root .dash-icon.tone-slate { background: rgba(102,112,133,.12); color: var(--dash-muted); }

.dash-root .dash-metric {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.dash-root .dash-metric small {
    font-size: .8rem;
    font-weight: 500;
    color: var(--dash-muted);
    letter-spacing: 0;
    margin-left: 5px;
}

.dash-root .dash-chip {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(247,144,9,.14);
    color: #b54708;
    white-space: nowrap;
    align-self: center;
}
[data-bs-theme="dark"] .dash-root .dash-chip { color: #fdb022; }
.dash-root .dash-chip[hidden] { display: none; }

.dash-root .dash-age {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .77rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--dash-track);
    color: var(--dash-muted);
    margin-top: 10px;
}
.dash-root .dash-age[data-tone="urgent"] { background: rgba(240,68,56,.1); color: #b42318; }
.dash-root .dash-age[data-tone="warn"] { background: rgba(247,144,9,.12); color: #b54708; }
[data-bs-theme="dark"] .dash-root .dash-age[data-tone="urgent"] { color: #fda29b; }
[data-bs-theme="dark"] .dash-root .dash-age[data-tone="warn"] { color: #fdb022; }
.dash-root .dash-age[hidden] { display: none; }

.dash-root .dash-segbar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--dash-track);
    margin: 14px 0 13px;
}
.dash-root .dash-seg { width: 0; transition: width .65s cubic-bezier(.4,0,.2,1); }
.dash-root .dash-seg.pub { background: var(--c-pub); }
.dash-root .dash-seg.rev { background: var(--c-rev); }
.dash-root .dash-seg.pend { background: var(--c-pend); }
.dash-root .dash-seg.dis { background: var(--c-dis); }
.dash-root .dash-seg.wait { background: var(--c-wait); }
.dash-root .dash-seg.idle { background: var(--c-idle); }
.dash-root .dash-seg.off { background: var(--c-off); }

.dash-root .dash-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}
.dash-root .dash-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--dash-muted);
}
.dash-root .dash-legend li.act { color: var(--dash-text); font-weight: 600; }
.dash-root .dash-legend b {
    margin-left: auto;
    color: var(--dash-text);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.dash-root .dot { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; display: block; }
.dash-root .dot.pub { background: var(--c-pub); }
.dash-root .dot.rev { background: var(--c-rev); }
.dash-root .dot.pend { background: var(--c-pend); }
.dash-root .dot.dis { background: var(--c-dis); }
.dash-root .dot.wait { background: var(--c-wait); }
.dash-root .dot.idle { background: var(--c-idle); }
.dash-root .dot.off { background: var(--c-off); }

.dash-root .dash-push { margin-top: auto; }
.dash-root .dash-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-root .dash-ring {
    position: relative;
    width: 100%;
    max-width: 172px;
    height: 172px;
    margin: 2px auto 14px;
}
.dash-root .dash-ring canvas { display: block; }
.dash-root .dash-ring-fallback {
    display: none;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%);
    mask: radial-gradient(circle, transparent 61%, #000 62%);
    background: var(--dash-track);
}
.dash-root .dash-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.dash-root .dash-ring-center strong {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dash-root .dash-ring-center span {
    font-size: .69rem;
    color: var(--dash-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 5px;
}

.dash-root .dash-nodes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.dash-root .dash-node {
    border: 1px solid var(--dash-border);
    border-radius: 14px;
    padding: 14px;
    height: 100%;
    transition: border-color .2s ease;
}
.dash-root .dash-node[data-state="fail"] { border-color: rgba(240,68,56,.4); }

.dash-root .dash-node-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}
.dash-root .dash-node-head b { font-size: .92rem; letter-spacing: -.01em; }

.dash-root .node-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-idle); flex: 0 0 auto; display: block; }
.dash-root .dash-node[data-state="loading"] .node-dot { background: var(--c-pend); animation: dash-pulse 1.1s ease-in-out infinite; }
.dash-root .dash-node[data-state="ok"] .node-dot { background: var(--c-pub); }
.dash-root .dash-node[data-state="fail"] .node-dot { background: var(--c-dis); }

.dash-root .dash-pill {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--dash-track);
    color: var(--dash-muted);
    white-space: nowrap;
}
.dash-root .dash-pill.fast { background: rgba(18,183,106,.12); color: #027a48; }
.dash-root .dash-pill.mid { background: rgba(247,144,9,.14); color: #b54708; }
.dash-root .dash-pill.slow { background: rgba(240,68,56,.12); color: #b42318; }
[data-bs-theme="dark"] .dash-root .dash-pill.fast { color: #32d583; }
[data-bs-theme="dark"] .dash-root .dash-pill.mid { color: #fdb022; }
[data-bs-theme="dark"] .dash-root .dash-pill.slow { color: #fda29b; }

.dash-root .dash-node-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.dash-root .dash-node-item {
    background: var(--dash-track);
    border-radius: 10px;
    padding: 9px 11px;
}
[data-bs-theme="dark"] .dash-root .dash-node-item { background: rgba(255,255,255,.035); }
.dash-root .dash-node-item.alert { background: rgba(247,144,9,.13); }
.dash-root .dash-node-item span {
    display: block;
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dash-muted);
    margin-bottom: 4px;
}
.dash-root .dash-node-item b {
    font-size: .93rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.dash-root .dash-node-error {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .8rem;
    color: var(--c-dis);
    min-height: 42px;
}
.dash-root .dash-retry {
    margin-left: auto;
    border: 1px solid rgba(240,68,56,.35);
    background: transparent;
    color: var(--c-dis);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: .74rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.dash-root .dash-retry:hover { background: rgba(240,68,56,.08); }

.dash-root .skel {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    user-select: none;
    display: inline-block;
    border-radius: 6px;
    background-image: linear-gradient(90deg, var(--dash-skel-a) 25%, var(--dash-skel-b) 37%, var(--dash-skel-a) 63%);
    background-size: 400% 100%;
    animation: dash-shimmer 1.5s ease infinite;
}

.dash-root .dash-fade {
    opacity: 0;
    transform: translateY(6px);
    animation: dash-in .45s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes dash-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes dash-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes dash-spin { to { transform: rotate(360deg); } }
@keyframes dash-in { to { opacity: 1; transform: none; } }

@media (max-width: 1199.98px) {
    .dash-root .g3 { grid-column: span 6; }
    .dash-root .g4 { grid-column: span 6; }
    .dash-root .g6 { grid-column: span 12; }
    .dash-root .dash-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .dash-root .g3, .dash-root .g4, .dash-root .g6 { grid-column: span 12; }
    .dash-root .dash-nodes { grid-template-columns: minmax(0, 1fr); }
    .dash-root .dash-metric { font-size: 1.8rem; }
    .dash-root .dash-legend { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .dash-root .dash-toasts { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-root *,
    .dash-root *::before,
    .dash-root *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .dash-root .dash-fade { opacity: 1; transform: none; }
}
</style>
@endverbatim

<main class="dash-root">
    <div class="dash-wrap">

        <div class="dash-bar">
            <div>
                <h1 class="dash-title">Painel administrativo</h1>
                <div class="dash-status" id="dash-status" data-state="loading" role="status" aria-live="polite">
                    <span class="pip"></span>
                    <span id="dash-status-text">Consultando servidores...</span>
                </div>
            </div>
            <div class="dash-tools">
                <button type="button" class="dash-bell" id="dash-bell" data-on="1" title="Som ligado">
                    <i class="bi bi-volume-up-fill"></i>
                </button>
                <button type="button" class="dash-refresh" id="dash-refresh">
                    <i class="bi bi-arrow-clockwise"></i> Atualizar
                </button>
            </div>
        </div>

        <div class="dash-actions">
            <a href="{{ route('admin.terms.index') }}" class="dash-action" data-action="terms.pending" data-tone="idle">
                <div class="dash-action-top">
                    <span class="dash-action-num skel" data-kpi="terms.pending">0</span>
                    <span class="dash-action-tag" data-late="terms" hidden>atrasado</span>
                </div>
                <span class="dash-action-label">Termos iOS a aprovar</span>
            </a>

            <a href="{{ route('admin.appsIos') }}" class="dash-action" data-action="ios.ready" data-tone="idle">
                <div class="dash-action-top">
                    <span class="dash-action-num skel" data-kpi="ios.ready">0</span>
                </div>
                <span class="dash-action-label">iOS a publicar</span>
            </a>

            <a href="{{ route('admin.apps') }}" class="dash-action" data-action="apps.awaiting" data-tone="idle">
                <div class="dash-action-top">
                    <span class="dash-action-num skel" data-kpi="apps.awaiting">0</span>
                </div>
                <span class="dash-action-label">Rádio a publicar</span>
            </a>

            <a href="{{ route('admin.appsTv') }}" class="dash-action" data-action="tv.awaiting" data-tone="idle">
                <div class="dash-action-top">
                    <span class="dash-action-num skel" data-kpi="tv.awaiting">0</span>
                </div>
                <span class="dash-action-label">TV a publicar</span>
            </a>

            <a href="{{ route('admin.ads') }}" class="dash-action" data-action="ads.pending" data-tone="idle">
                <div class="dash-action-top">
                    <span class="dash-action-num skel" data-kpi="ads.pending">0</span>
                </div>
                <span class="dash-action-label">Publicidades a aprovar</span>
            </a>

            <a href="{{ route('admin.skills') }}" class="dash-action" data-action="skills.todo" data-tone="idle">
				<div class="dash-action-top">
					<span class="dash-action-num skel" data-kpi="skills.todo">0</span>
				</div>
				<span class="dash-action-label">
					Skills Alexa pendentes<br>
					<span data-kpi="skills.form">0</span> a enviar · <span data-kpi="skills.review">0</span> na Amazon
				</span>
			</a>
        </div>

        <div class="dash-grid">

            <div class="g3">
                <div class="dash-card" aria-busy="true">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Serviços</p>
                            <p class="dash-sub">Base de streamings</p>
                        </div>
                        <span class="dash-icon tone-green"><i class="bi bi-broadcast"></i></span>
                    </div>

                    <div class="dash-ring">
                        <div class="dash-ring-fallback" id="ring-fallback"></div>
                        <canvas id="chart-services"></canvas>
                        <div class="dash-ring-center">
                            <strong data-kpi="services.total" class="skel">000</strong>
                            <span>total</span>
                        </div>
                    </div>

                    <ul class="dash-legend dash-push">
                        <li><i class="dot pub"></i> Ativos <b data-kpi="services.active" class="skel">000</b></li>
                        <li><i class="dot rev"></i> Suspensos <b data-kpi="services.suspended" class="skel">000</b></li>
                    </ul>
                    <p class="dash-sub" style="margin-top:12px">
                        <span data-kpi="services.rate" class="skel">00,0%</span> da base operando
                    </p>
                </div>
            </div>

            <div class="g3">
                <a href="{{ route('admin.apps') }}" class="dash-card" aria-busy="true">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Apps Rádio</p>
                            <p class="dash-sub">Android · rádio</p>
                        </div>
                        <span class="dash-chip" data-flag="apps" hidden>parcial</span>
                        <span class="dash-icon"><i class="bi bi-phone"></i></span>
                    </div>

                    <p class="dash-metric"><span data-kpi="apps.total" class="skel">000</span><small>apps</small></p>

                    <div class="dash-segbar" data-segbar="apps" data-keys="published,awaiting,review,form,disabled">
                        <span class="dash-seg pub"></span>
                        <span class="dash-seg rev"></span>
                        <span class="dash-seg pend"></span>
                        <span class="dash-seg idle"></span>
                        <span class="dash-seg dis"></span>
                    </div>

                    <ul class="dash-legend dash-push">
                        <li><i class="dot pub"></i> Publicados <b data-kpi="apps.published" class="skel">000</b></li>
                        <li class="act"><i class="dot rev"></i> Aguard. publicação <b data-kpi="apps.awaiting" class="skel">000</b></li>
                        <li><i class="dot pend"></i> Análise <b data-kpi="apps.review" class="skel">000</b></li>
                        <li><i class="dot idle"></i> Pendente (cliente) <b data-kpi="apps.form" class="skel">000</b></li>
                        <li><i class="dot dis"></i> Desativados <b data-kpi="apps.disabled" class="skel">000</b></li>
                    </ul>
                </a>
            </div>

            <div class="g3">
                <a href="{{ route('admin.appsTv') }}" class="dash-card" aria-busy="true">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Apps TV</p>
                            <p class="dash-sub">Android TV</p>
                        </div>
                        <span class="dash-chip" data-flag="tv" hidden>parcial</span>
                        <span class="dash-icon tone-amber"><i class="bi bi-tv"></i></span>
                    </div>

                    <p class="dash-metric"><span data-kpi="tv.total" class="skel">000</span><small>apps</small></p>

                    <div class="dash-segbar" data-segbar="tv" data-keys="published,awaiting,review,form,disabled">
                        <span class="dash-seg pub"></span>
                        <span class="dash-seg rev"></span>
                        <span class="dash-seg pend"></span>
                        <span class="dash-seg idle"></span>
                        <span class="dash-seg dis"></span>
                    </div>

                    <ul class="dash-legend dash-push">
                        <li><i class="dot pub"></i> Publicados <b data-kpi="tv.published" class="skel">000</b></li>
                        <li class="act"><i class="dot rev"></i> Aguard. publicação <b data-kpi="tv.awaiting" class="skel">000</b></li>
                        <li><i class="dot pend"></i> Análise <b data-kpi="tv.review" class="skel">000</b></li>
                        <li><i class="dot idle"></i> Pendente (cliente) <b data-kpi="tv.form" class="skel">000</b></li>
                        <li><i class="dot dis"></i> Desativados <b data-kpi="tv.disabled" class="skel">000</b></li>
                    </ul>
                </a>
            </div>

            <div class="g3">
                <a href="{{ route('admin.appsIos') }}" class="dash-card" aria-busy="true">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Apps iOS</p>
                            <p class="dash-sub">App Store</p>
                        </div>
                        <span class="dash-chip" data-flag="ios" hidden>parcial</span>
                        <span class="dash-icon tone-slate"><i class="bi bi-apple"></i></span>
                    </div>

                    <p class="dash-metric"><span data-kpi="ios.total" class="skel">000</span><small>apps</small></p>

                    <div class="dash-segbar" data-segbar="ios" data-keys="published,ready,awaiting,pending">
                        <span class="dash-seg pub"></span>
                        <span class="dash-seg rev"></span>
                        <span class="dash-seg wait"></span>
                        <span class="dash-seg idle"></span>
                    </div>

                    <ul class="dash-legend dash-push">
                        <li><i class="dot pub"></i> Publicados <b data-kpi="ios.published" class="skel">000</b></li>
                        <li class="act"><i class="dot rev"></i> Prontos p/ publicar <b data-kpi="ios.ready" class="skel">000</b></li>
                        <li><i class="dot wait"></i> Aguardando termo <b data-kpi="ios.awaiting" class="skel">000</b></li>
                        <li><i class="dot idle"></i> Pendente (cliente) <b data-kpi="ios.pending" class="skel">000</b></li>
                    </ul>
                </a>
            </div>

            <div class="g6">
                <a href="{{ route('admin.terms.index') }}" class="dash-card" id="card-terms" aria-busy="true">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Termos de autorização iOS</p>
                            <p class="dash-sub">Fila de aprovação dos atendentes</p>
                        </div>
                        <span class="dash-chip" data-flag="terms" hidden>parcial</span>
                        <span class="dash-icon tone-violet"><i class="bi bi-file-earmark-check"></i></span>
                    </div>

                    <p class="dash-metric">
                        <span data-kpi="terms.pending" class="skel">000</span><small>aguardando aprovação</small>
                    </p>

                    <div class="dash-age" id="terms-age" data-tone="idle" hidden>
                        <i class="bi bi-hourglass-split"></i>
                        <span id="terms-age-text"></span>
                    </div>

                    <div class="dash-segbar" data-segbar="terms" data-keys="pending,filling,approved,rejected">
                        <span class="dash-seg rev"></span>
                        <span class="dash-seg idle"></span>
                        <span class="dash-seg pub"></span>
                        <span class="dash-seg dis"></span>
                    </div>

                    <ul class="dash-legend dash-push">
                        <li class="act"><i class="dot rev"></i> A aprovar <b data-kpi="terms.pending" class="skel">000</b></li>
                        <li><i class="dot idle"></i> Em preenchimento <b data-kpi="terms.filling" class="skel">000</b></li>
                        <li><i class="dot pub"></i> Aprovados <b data-kpi="terms.approved" class="skel">000</b></li>
                        <li><i class="dot dis"></i> Reprovados <b data-kpi="terms.rejected" class="skel">000</b></li>
                    </ul>

                    <p class="dash-sub" style="margin-top:12px">
                        "A aprovar" = termo assinado e enviado, esperando o atendente. "Em preenchimento" ainda está com o cliente.
                    </p>
                </a>
            </div>

            <div class="g3">
                <a href="{{ route('admin.skills') }}" class="dash-card" aria-busy="true">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Skills Alexa</p>
                            <p class="dash-sub">Fila de envio à Amazon</p>
                        </div>
                        <span class="dash-chip" data-flag="skills" hidden>parcial</span>
                        <span class="dash-icon tone-slate"><i class="bi bi-alexa"></i></span>
                    </div>

                    <p class="dash-metric"><span data-kpi="skills.total" class="skel">000</span><small>skills</small></p>

                    <div class="dash-segbar" data-segbar="skills" data-keys="approved,form,review,rejected,disabled">
						<span class="dash-seg pub"></span>
						<span class="dash-seg rev"></span>
						<span class="dash-seg pend"></span>
						<span class="dash-seg dis"></span>
						<span class="dash-seg off"></span>
					</div>

					<ul class="dash-legend dash-push">
						<li><i class="dot pub"></i> Aprovadas <b data-kpi="skills.approved" class="skel">000</b></li>
						<li class="act"><i class="dot rev"></i> Pendentes (a enviar) <b data-kpi="skills.form" class="skel">000</b></li>
						<li><i class="dot pend"></i> Análise (Amazon) <b data-kpi="skills.review" class="skel">000</b></li>
						<li><i class="dot dis"></i> Rejeitadas <b data-kpi="skills.rejected" class="skel">000</b></li>
						<li><i class="dot off"></i> Desativadas <b data-kpi="skills.disabled" class="skel">000</b></li>
					</ul>
                </a>
            </div>

            <div class="g3">
                <a href="{{ route('admin.ads') }}" class="dash-card" aria-busy="true">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Publicidades</p>
                            <p class="dash-sub">Para aprovação</p>
                        </div>
                        <span class="dash-chip" data-flag="ads" hidden>parcial</span>
                        <span class="dash-icon tone-amber"><i class="bi bi-megaphone"></i></span>
                    </div>
                    <p class="dash-metric"><span data-kpi="ads.pending" class="skel">000</span></p>
                    <p class="dash-sub dash-push">de <b data-kpi="ads.total" class="skel">000</b> criadas</p>
                </a>
            </div>

            <div class="g4">
                <a href="{{ route('admin.servers') }}" class="dash-card" aria-busy="true">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Streaming</p>
                            <p class="dash-sub">Servidores ativos</p>
                        </div>
                        <span class="dash-icon tone-green"><i class="bi bi-volume-up"></i></span>
                    </div>
                    <p class="dash-metric"><span data-kpi="servers.total" class="skel">00</span></p>
                    <p class="dash-sub dash-push dash-trunc">
                        Principal: <b data-kpi="servers.main" class="skel">servidor</b>.brascast.com
                    </p>
                </a>
            </div>

            <div class="g4">
                <div class="dash-card" aria-busy="true">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Tarefas</p>
                            <p class="dash-sub">Sem data de execução</p>
                        </div>
                        <span class="dash-icon tone-red"><i class="bi bi-list-check"></i></span>
                    </div>
                    <p class="dash-metric"><span data-kpi="tasks.pending" class="skel">000</span></p>
                    <p class="dash-sub dash-push">de <b data-kpi="tasks.total" class="skel">000</b> registradas</p>
                </div>
            </div>

            <div class="g4">
                <div class="dash-card" aria-busy="true">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Contas Play Store</p>
                            <p class="dash-sub">Cadastradas na central</p>
                        </div>
                        <span class="dash-icon tone-slate"><i class="bi bi-google-play"></i></span>
                    </div>
                    <p class="dash-metric"><span data-kpi="accounts.active" class="skel">00</span></p>
                    <p class="dash-sub dash-push">de <b data-kpi="accounts.total" class="skel">00</b> contas ativas</p>
                </div>
            </div>

            <div class="g12">
                <div class="dash-card">
                    <div class="dash-head">
                        <div>
                            <p class="dash-label">Nós de dados</p>
                            <p class="dash-sub">Latência e pendências por servidor</p>
                        </div>
                        <span class="dash-icon tone-slate"><i class="bi bi-hdd-network"></i></span>
                    </div>

                    <div class="dash-nodes">
                        @foreach ($servers as $server)
                        <div class="dash-node" data-server="{{ $server }}" data-state="loading">
                            <div class="dash-node-head">
                                <span class="node-dot"></span>
                                <b>Site {{ $server }}</b>
                                <span class="dash-pill" data-cell="ms">—</span>
                            </div>
                            <div data-cell="body">
                                <div class="dash-node-grid">
                                    <div class="dash-node-item"><span>Rádio a publicar</span><b class="skel">00</b></div>
                                    <div class="dash-node-item"><span>TV a publicar</span><b class="skel">00</b></div>
                                    <div class="dash-node-item"><span>iOS a publicar</span><b class="skel">00</b></div>
                                    <div class="dash-node-item"><span>Termos a aprovar</span><b class="skel">00</b></div>
                                    <div class="dash-node-item"><span>Ads a aprovar</span><b class="skel">00</b></div>
                                    <div class="dash-node-item"><span>Skills a avaliar</span><b class="skel">00</b></div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <p class="dash-sub" style="margin-top:14px">
                        Somente pendências que dependem do atendente. Itens destacados têm fila aberta.
                    </p>
                </div>
            </div>

        </div>
    </div>

    <div class="dash-toasts" id="dash-toasts"></div>
</main>

@include('admin/includes/footer')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
window.dashEndpoints = {
    local: "{{ route('admin.dash.stats.local') }}",
    central: "{{ route('admin.dash.stats.central') }}",
    sites: {
        @foreach ($servers as $server)
        "{{ $server }}": "{{ route('admin.dash.stats.site', $server) }}"@if(!$loop->last),@endif
        @endforeach
    },
    login: "{{ route('admin.login') }}"
};

window.dashLinks = {
    terms:  "{{ route('admin.terms.index') }}",
    apps:   "{{ route('admin.apps') }}",
    tv:     "{{ route('admin.appsTv') }}",
    ios:    "{{ route('admin.appsIos') }}",
    ads:    "{{ route('admin.ads') }}",
    skills: "{{ route('admin.skills') }}"
};
</script>

@verbatim
<script>
(function () {
    var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var POLL_MS = 30000;
    var MAX_TOASTS = 8;
    var baseTitle = document.title;

    var WATCH = [
        { key: 'terms.pending', label: 'termo(s) iOS para aprovar', link: 'terms' },
        { key: 'ios.ready',     label: 'app(s) iOS para publicar',  link: 'ios' },
        { key: 'apps.awaiting', label: 'app(s) de rádio para publicar', link: 'apps' },
        { key: 'tv.awaiting',   label: 'app(s) de TV para publicar', link: 'tv' },
        { key: 'ads.pending',   label: 'publicidade(s) para aprovar', link: 'ads' },
        { key: 'skills.form',   label: 'skill(s) Alexa para enviar', link: 'skills' },
		{ key: 'skills.review', label: 'skill(s) Alexa aguardando retorno da Amazon', link: 'skills', notify: false }
    ];

    var APP_KEYS = ['total', 'published', 'awaiting', 'review', 'form', 'disabled'];
    var IOS_KEYS = ['total', 'published', 'ready', 'awaiting', 'pending', 'others'];
    var TERM_KEYS = ['total', 'pending', 'filling', 'approved', 'rejected'];
    var SKILL_KEYS = ['total', 'review', 'form', 'approved', 'rejected', 'disabled'];

    var AGG_KEYS = [];

    ['apps', 'tv'].forEach(function (group) {
        APP_KEYS.forEach(function (key) { AGG_KEYS.push(group + '.' + key); });
    });
    IOS_KEYS.forEach(function (key) { AGG_KEYS.push('ios.' + key); });
    TERM_KEYS.forEach(function (key) { AGG_KEYS.push('terms.' + key); });
    SKILL_KEYS.forEach(function (key) { AGG_KEYS.push('skills.' + key); });
    AGG_KEYS.push('ads.total', 'ads.pending');
	AGG_KEYS.push('skills.todo');

    var ring = null;
    var totals = {};
    var baseline = null;
    var lastGood = null;
    var oldestTerm = null;
    var pending = 0;
    var failed = 0;
    var okSites = 0;
    var quiet = false;
    var lastUpdated = null;
    var soundOn = true;
    var audioCtx = null;
    var siteKeys = Object.keys(window.dashEndpoints.sites);

    function resetTotals() {
        oldestTerm = null;
        totals = {
            apps: { total: 0, published: 0, awaiting: 0, review: 0, form: 0, disabled: 0 },
            tv: { total: 0, published: 0, awaiting: 0, review: 0, form: 0, disabled: 0 },
            ios: { total: 0, published: 0, ready: 0, awaiting: 0, pending: 0, others: 0 },
            terms: { total: 0, pending: 0, filling: 0, approved: 0, rejected: 0 },
            ads: { total: 0, pending: 0 },
            skills: { total: 0, review: 0, form: 0, approved: 0, rejected: 0, disabled: 0 }
        };
    }

    function fmt(value) { return Number(value).toLocaleString('pt-BR'); }

    function each(list, callback) { Array.prototype.forEach.call(list, callback); }

    function pick(path) {
        var parts = path.split('.');
        var group = totals[parts[0]];
        return group ? (group[parts[1]] || 0) : 0;
    }

    function pref(key, value) {
        try {
            if (value === undefined) { return localStorage.getItem(key); }
            localStorage.setItem(key, value);
        } catch (e) {}
        return null;
    }

    function animate(el, target) {
        var from = parseFloat(el.getAttribute('data-value') || '0');
        el.setAttribute('data-value', target);

        if (reduceMotion || from === target) {
            el.textContent = fmt(target);
            return;
        }

        var start = performance.now();

        function frame(now) {
            var progress = Math.min((now - start) / 620, 1);
            var eased = 1 - Math.pow(1 - progress, 3);
            el.textContent = fmt(Math.round(from + (target - from) * eased));
            if (progress < 1) { requestAnimationFrame(frame); }
        }

        requestAnimationFrame(frame);
    }

    function setKpi(key, value) {
        each(document.querySelectorAll('[data-kpi="' + key + '"]'), function (el) {
            var wasSkeleton = el.className.indexOf('skel') !== -1;
            el.classList.remove('skel');

            if (typeof value === 'number') { animate(el, value); }
            else { el.textContent = value; }

            if (wasSkeleton && !reduceMotion) { el.classList.add('dash-fade'); }
        });
    }

    function skeletonize(keys) {
        keys.forEach(function (key) {
            each(document.querySelectorAll('[data-kpi="' + key + '"]'), function (el) {
                el.classList.remove('dash-fade');
                el.classList.add('skel');
            });
        });
    }

    function setFlag(key, visible) {
        var el = document.querySelector('[data-flag="' + key + '"]');
        if (el) { el.hidden = !visible; }
    }

    function setBusy(done) {
        each(document.querySelectorAll('[aria-busy]'), function (el) {
            el.setAttribute('aria-busy', done ? 'false' : 'true');
        });
    }

    function setSegbar(group, data) {
        var bar = document.querySelector('[data-segbar="' + group + '"]');
        if (!bar) { return; }

        var keys = (bar.getAttribute('data-keys') || '').split(',');
        var total = 0;

        keys.forEach(function (key) { total += (data[key] || 0); });

        each(bar.querySelectorAll('.dash-seg'), function (seg, index) {
            var value = data[keys[index]] || 0;
            seg.style.width = total > 0 ? ((value / total) * 100).toFixed(2) + '%' : '0%';
        });
    }

    function daysSince(iso) {
        if (!iso) { return null; }
        var time = new Date(iso).getTime();
        if (isNaN(time)) { return null; }
        return Math.floor((Date.now() - time) / 86400000);
    }

    function setTone(el, tone) { if (el) { el.setAttribute('data-tone', tone); } }

    function updateActions() {
        var termDays = daysSince(oldestTerm);
        var late = totals.terms.pending > 0 && termDays !== null && termDays >= 2;

        WATCH.forEach(function (item) {
            var el = document.querySelector('[data-action="' + item.key + '"]');
            if (!el) { return; }

            var value = pick(item.key);
            var urgent = item.key === 'terms.pending' && late;

            if (value <= 0) { setTone(el, 'clear'); }
            else if (urgent) { setTone(el, 'urgent'); }
            else { setTone(el, 'warn'); }
        });
		
		var skillsTile = document.querySelector('[data-action="skills.todo"]');
		if (skillsTile) {
			setTone(skillsTile, (totals.skills.form + totals.skills.review) <= 0 ? 'clear' : 'warn');
		}

        var lateTag = document.querySelector('[data-late="terms"]');
        if (lateTag) { lateTag.hidden = !late; }

        var card = document.getElementById('card-terms');
        if (card) { card.setAttribute('data-alert', late ? '1' : '0'); }

        var age = document.getElementById('terms-age');
        var ageText = document.getElementById('terms-age-text');

        if (age && ageText) {
            if (totals.terms.pending > 0 && termDays !== null) {
                var label;
                if (termDays <= 0) { label = 'O mais antigo entrou hoje'; }
                else if (termDays === 1) { label = 'O mais antigo espera há 1 dia'; }
                else { label = 'O mais antigo espera há ' + termDays + ' dias'; }

                ageText.textContent = label;
                age.hidden = false;
                setTone(age, termDays >= 2 ? 'urgent' : (termDays >= 1 ? 'warn' : 'idle'));
            } else {
                age.hidden = true;
            }
        }
    }

    function renderRemote() {
        var partial = failed > 0;

        ['apps', 'tv'].forEach(function (group) {
            APP_KEYS.forEach(function (key) { setKpi(group + '.' + key, totals[group][key]); });
            setSegbar(group, totals[group]);
            setFlag(group, partial);
        });

        IOS_KEYS.forEach(function (key) { setKpi('ios.' + key, totals.ios[key]); });
        setSegbar('ios', totals.ios);
        setFlag('ios', partial);

        TERM_KEYS.forEach(function (key) { setKpi('terms.' + key, totals.terms[key]); });
        setSegbar('terms', totals.terms);
        setFlag('terms', partial);

        SKILL_KEYS.forEach(function (key) { setKpi('skills.' + key, totals.skills[key]); });
        setSegbar('skills', totals.skills);
        setFlag('skills', partial);
		setKpi('skills.todo', totals.skills.form + totals.skills.review);

        setKpi('ads.total', totals.ads.total);
        setKpi('ads.pending', totals.ads.pending);
        setFlag('ads', partial);

        updateActions();
    }

    function updateTitle() {
        var total = 0;
        WATCH.forEach(function (item) { total += pick(item.key); });
        document.title = (total > 0 ? '(' + total + ') ' : '') + baseTitle;
    }

    function unlockAudio() {
        try {
            var Ctx = window.AudioContext || window.webkitAudioContext;
            if (!Ctx) { return; }
            audioCtx = audioCtx || new Ctx();
            if (audioCtx.state === 'suspended') { audioCtx.resume(); }
        } catch (e) {}
    }

    function beep() {
        if (!soundOn) { return; }

        unlockAudio();
        if (!audioCtx) { return; }

        try {
            var comp = audioCtx.createDynamicsCompressor();
            comp.threshold.value = -8;
            comp.knee.value = 12;
            comp.ratio.value = 8;
            comp.attack.value = 0.003;
            comp.release.value = 0.15;

            var master = audioCtx.createGain();
            master.gain.value = 0.85;

            comp.connect(master);
            master.connect(audioCtx.destination);

            [0, 0.22].forEach(function (offset) {
                var osc = audioCtx.createOscillator();
                var gain = audioCtx.createGain();
                var at = audioCtx.currentTime + offset;

                osc.connect(gain);
                gain.connect(comp);
                osc.type = 'sine';
                osc.frequency.value = offset ? 1175 : 880;

                gain.gain.setValueAtTime(0, at);
                gain.gain.linearRampToValueAtTime(0.75, at + 0.015);
                gain.gain.setValueAtTime(0.75, at + 0.11);
                gain.gain.linearRampToValueAtTime(0, at + 0.19);

                osc.start(at);
                osc.stop(at + 0.2);
            });
        } catch (e) {}
    }

    function dismiss(el) {
        if (!el || el.className.indexOf('out') !== -1) { return; }
        el.classList.add('out');
        setTimeout(function () { if (el.parentNode) { el.parentNode.removeChild(el); } }, 320);
    }

    function toast(item, initial) {
        var box = document.getElementById('dash-toasts');
        if (!box) { return; }

        while (box.children.length >= MAX_TOASTS) { box.removeChild(box.firstChild); }

        var el = document.createElement('a');
        el.className = 'dash-toast' + (initial ? ' initial' : '');
        el.href = (window.dashLinks && window.dashLinks[item.link]) || '#';

        var value = initial ? fmt(item.value) : '+' + fmt(item.diff);

        el.innerHTML = '<div class="dash-toast-head">'
            + '<i class="bi ' + (initial ? 'bi-clipboard-check' : 'bi-bell-fill') + '"></i>'
            + (initial ? 'Pendência em aberto' : 'Nova pendência')
            + '<button type="button" class="dash-toast-close" data-dismiss="1" aria-label="Fechar">&times;</button>'
            + '</div>'
            + '<div class="dash-toast-body">'
            + '<span class="dash-toast-num">' + value + '</span>'
            + '<span class="dash-toast-label">' + item.label + '</span>'
            + '</div>'
            + '<small>Clique para abrir · ' + new Date().toLocaleTimeString('pt-BR') + '</small>';

        box.appendChild(el);
        box.scrollTop = box.scrollHeight;
    }

    function checkChanges() {
        if (failed > 0) { updateTitle(); return; }

        var current = {};
        WATCH.forEach(function (item) { current[item.key] = pick(item.key); });

        if (!baseline) {
            baseline = current;
            updateTitle();

            var opened = 0;

            WATCH.forEach(function (item) {
                if (current[item.key] > 0) {
                    toast({ label: item.label, value: current[item.key], link: item.link }, true);
                    opened++;
                }
            });

            if (opened) { beep(); }
            return;
        }

        var changed = 0;

        WATCH.forEach(function (item) {
			if (item.notify === false) { return; }

			var diff = current[item.key] - baseline[item.key];
			if (diff > 0) {
				toast({ label: item.label, diff: diff, link: item.link }, false);
				changed++;
			}
		});

        baseline = current;
        updateTitle();

        if (changed) { beep(); }
    }

    function drawRing(active, suspended) {
        var canvas = document.getElementById('chart-services');
        var fallback = document.getElementById('ring-fallback');
        if (!canvas) { return; }

        if (typeof Chart === 'undefined') {
            var total = active + suspended;
            var pct = total > 0 ? (active / total) * 100 : 0;
            canvas.style.display = 'none';
            fallback.style.display = 'block';
            fallback.style.background = 'conic-gradient(var(--c-pub) 0 ' + pct + '%, var(--c-rev) ' + pct + '% 100%)';
            return;
        }

        if (ring) {
            ring.data.datasets[0].data = [active, suspended];
            ring.update();
            return;
        }

        ring = new Chart(canvas, {
            type: 'doughnut',
            data: {
                labels: ['Ativos', 'Suspensos'],
                datasets: [{
                    data: [active, suspended],
                    backgroundColor: ['rgba(18,183,106,.9)', 'rgba(247,144,9,.9)'],
                    borderWidth: 0,
                    hoverOffset: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '74%',
                animation: { duration: reduceMotion ? 0 : 750 },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        displayColors: false,
                        padding: 10,
                        callbacks: {
                            label: function (context) { return context.label + ': ' + fmt(context.parsed); }
                        }
                    }
                }
            }
        });
    }

    function pillClass(ms) {
        if (ms === null || ms === undefined) { return ''; }
        if (ms < 400) { return 'fast'; }
        if (ms < 1200) { return 'mid'; }
        return 'slow';
    }

    function cell(label, value) {
        return '<div class="dash-node-item' + (value > 0 ? ' alert' : '') + '">'
            + '<span>' + label + '</span><b>' + fmt(value) + '</b></div>';
    }
	
	function cell2(label, a, b) {
		return '<div class="dash-node-item' + (a > 0 ? ' alert' : '') + '">'
			+ '<span>' + label + '</span><b>' + fmt(a) + ' / ' + fmt(b) + '</b></div>';
	}

    function setNode(server, state, payload, ms, message) {
        var node = document.querySelector('.dash-node[data-server="' + server + '"]');
        if (!node) { return; }

        if (state === 'loading' && quiet) { return; }

        node.setAttribute('data-state', state);

        var pill = node.querySelector('[data-cell="ms"]');
        pill.className = 'dash-pill ' + (state === 'ok' ? pillClass(ms) : '');
        pill.textContent = (ms !== null && ms !== undefined) ? ms + ' ms' : '—';

        var body = node.querySelector('[data-cell="body"]');

        if (state === 'fail') {
            body.innerHTML = '<div class="dash-node-error">'
                + '<i class="bi bi-exclamation-triangle"></i>'
                + '<span>' + (message || 'Servidor indisponível') + '</span>'
                + '<button type="button" class="dash-retry" data-retry="' + server + '">Tentar de novo</button>'
                + '</div>';
            return;
        }

        if (state === 'loading') {
            body.innerHTML = '<div class="dash-node-grid">'
                + '<div class="dash-node-item"><span>Rádio a publicar</span><b class="skel">00</b></div>'
                + '<div class="dash-node-item"><span>TV a publicar</span><b class="skel">00</b></div>'
                + '<div class="dash-node-item"><span>iOS a publicar</span><b class="skel">00</b></div>'
                + '<div class="dash-node-item"><span>Termos a aprovar</span><b class="skel">00</b></div>'
                + '<div class="dash-node-item"><span>Ads a aprovar</span><b class="skel">00</b></div>'
                + '<div class="dash-node-item"><span>Skills enviar / Amazon</span><b class="skel">00 / 00</b></div>'
                + '</div>';
            return;
        }

        body.innerHTML = '<div class="dash-node-grid' + (reduceMotion || quiet ? '' : ' dash-fade') + '">'
            + cell('Rádio a publicar', payload.apps.awaiting)
            + cell('TV a publicar', payload.apps_tv.awaiting)
            + cell('iOS a publicar', payload.apps_ios.ready)
            + cell('Termos a aprovar', payload.terms.pending)
            + cell('Ads a aprovar', payload.ads.pending)
            + cell2('Skills enviar / Amazon', payload.skills.form, payload.skills.review)
            + '</div>';
    }

    function relative() {
        if (!lastUpdated) { return ''; }

        var seconds = Math.round((Date.now() - lastUpdated) / 1000);

        if (seconds < 1) { return 'agora mesmo'; }
        if (seconds < 60) { return 'há ' + seconds + 's'; }

        var minutes = Math.floor(seconds / 60);
        if (minutes < 60) { return 'há ' + minutes + ' min ' + (seconds % 60) + 's'; }

        return 'há ' + Math.floor(minutes / 60) + 'h';
    }

    function updateStatus() {
        var box = document.getElementById('dash-status');
        var text = document.getElementById('dash-status-text');

        if (pending > 0) {
            if (quiet) { return; }
            box.setAttribute('data-state', 'loading');
            text.textContent = 'Consultando ' + pending + ' fonte(s)...';
            return;
        }

        if (failed > 0) {
            box.setAttribute('data-state', 'partial');
            text.textContent = 'Dados parciais · ' + failed + ' fonte(s) fora do ar · atualizado ' + relative();
            return;
        }

        box.setAttribute('data-state', 'ok');
        text.textContent = 'Atualizado ' + relative() + ' · monitorando a cada 30s';
    }

    function request(url, refresh) {
        var full = url + (refresh ? (url.indexOf('?') === -1 ? '?refresh=1' : '&refresh=1') : '');

        return fetch(full, {
            credentials: 'same-origin',
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (response) {
            if (response.status === 401) {
                window.location.href = window.dashEndpoints.login;
                return null;
            }
            return response.json();
        });
    }

    function settle() {
        pending--;

        if (pending <= 0) {
            pending = 0;

            if (failed === 0) {
                lastGood = { totals: totals, oldestTerm: oldestTerm };
            } else if (okSites === 0 && lastGood) {
                totals = lastGood.totals;
                oldestTerm = lastGood.oldestTerm;
            }

            renderRemote();

            lastUpdated = Date.now();
            setBusy(true);
            document.getElementById('dash-refresh').setAttribute('data-busy', '0');
            checkChanges();
            quiet = false;
        }

        updateStatus();
    }

    function loadSite(server, refresh) {
        setNode(server, 'loading', null, null);

        return request(window.dashEndpoints.sites[server], refresh).then(function (json) {
            if (!json) { return; }

            if (!json.ok) {
                failed++;
                setNode(server, 'fail', null, json.ms, json.message);
                return;
            }

            okSites++;

            var data = json.data;

            APP_KEYS.forEach(function (key) {
                totals.apps[key] += data.apps[key];
                totals.tv[key] += data.apps_tv[key];
            });

            IOS_KEYS.forEach(function (key) { totals.ios[key] += data.apps_ios[key]; });
            TERM_KEYS.forEach(function (key) { totals.terms[key] += data.terms[key]; });
            SKILL_KEYS.forEach(function (key) { totals.skills[key] += data.skills[key]; });

            if (data.terms.oldest_pending) {
                if (!oldestTerm || new Date(data.terms.oldest_pending) < new Date(oldestTerm)) {
                    oldestTerm = data.terms.oldest_pending;
                }
            }

            totals.ads.total += data.ads.total;
            totals.ads.pending += data.ads.pending;

            setNode(server, 'ok', data, json.ms);
        }).catch(function () {
            failed++;
            setNode(server, 'fail', null, null, 'Falha de conexão');
        }).then(settle);
    }

    function load(refresh, silent) {
        if (pending > 0) { return; }

        quiet = !!silent;
        resetTotals();
        failed = 0;
        okSites = 0;
        pending = 2 + siteKeys.length;

        if (!quiet) {
            setBusy(false);
            document.getElementById('dash-refresh').setAttribute('data-busy', '1');
            skeletonize(AGG_KEYS);
        }

        updateStatus();

        request(window.dashEndpoints.local, refresh).then(function (json) {
            if (!json) { return; }
            if (!json.ok) { failed++; return; }

            var services = json.data.services;
            var rate = services.total > 0 ? (services.active / services.total) * 100 : 0;

            setKpi('services.total', services.total);
            setKpi('services.active', services.active);
            setKpi('services.suspended', services.suspended);
            setKpi('services.rate', rate.toFixed(1).replace('.', ',') + '%');
            setKpi('servers.total', json.data.servers.total);
            setKpi('servers.main', json.data.servers.main);
            drawRing(services.active, services.suspended);
        }).catch(function () {
            failed++;
        }).then(settle);

        request(window.dashEndpoints.central, refresh).then(function (json) {
            if (!json) { return; }
            if (!json.ok) { failed++; return; }

            setKpi('tasks.total', json.data.tasks.total);
            setKpi('tasks.pending', json.data.tasks.pending);
            setKpi('accounts.total', json.data.accounts.total);
            setKpi('accounts.active', json.data.accounts.active);
        }).catch(function () {
            failed++;
        }).then(settle);

        siteKeys.forEach(function (server) {
            loadSite(server, refresh);
        });
    }

    function setSound(on) {
        soundOn = on;
        var bell = document.getElementById('dash-bell');
        bell.setAttribute('data-on', on ? '1' : '0');
        bell.querySelector('i').className = on ? 'bi bi-volume-up-fill' : 'bi bi-volume-mute';
        bell.title = on ? 'Som ligado' : 'Som desligado';
        pref('dashSound', on ? '1' : '0');
    }

    function start() {
        setSound(pref('dashSound') !== '0');

        document.getElementById('dash-bell').addEventListener('click', function () {
            var turningOn = !soundOn;
            setSound(turningOn);
            if (turningOn) { beep(); }
        });

        document.getElementById('dash-refresh').addEventListener('click', function () {
            load(true, false);
        });

        document.addEventListener('click', function (event) {
            unlockAudio();

            if (!event.target.closest) { return; }

            if (event.target.closest('[data-dismiss]')) {
                event.preventDefault();
                event.stopPropagation();
                dismiss(event.target.closest('.dash-toast'));
                return;
            }

            var retry = event.target.closest('[data-retry]');
            if (!retry) { return; }

            event.preventDefault();
            failed = Math.max(0, failed - 1);
            pending++;
            updateStatus();
            loadSite(retry.getAttribute('data-retry'), true);
        }, true);

        document.addEventListener('keydown', unlockAudio, { once: true });

        setInterval(function () { load(false, true); }, POLL_MS);

        setInterval(function () {
            if (pending === 0 && lastUpdated) { updateStatus(); }
        }, 1000);

        load(false, false);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', start);
    } else {
        start();
    }
})();
</script>
@endverbatim

<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>