/* Streaming Manager: light Bootstrap-3 style layout (dark top bar, orange active tab, blue primary buttons). */
:root { --orange: #f58220; --blue: #337ab7; --bg: #f4f4f4; --line: #dcdcdc; --text: #333; --muted: #777; --ok: #3c9a3c; --err: #c9302c; --warn: #d98c00; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif; }
a { color: var(--blue); text-decoration: none; cursor: pointer; } a:hover { text-decoration: underline; }
h1 { font-size: 34px; font-weight: 400; margin: 18px 0 4px; }
h2 { font-size: 24px; font-weight: 500; margin: 22px 0 6px; }
h3 { font-size: 18px; font-weight: 400; margin: 16px 0 6px; } h3 small { color: var(--muted); font-size: 13px; }
h4 { font-size: 14px; margin: 14px 0 4px; }
.muted { color: var(--muted); } .small { font-size: 12px; }

/* top bar */
.nav { background: #222; height: 42px; display: flex; align-items: stretch; color: #ccc; position: sticky; top: 0; z-index: 20; }
.nav .brand { display: flex; align-items: center; padding: 0 14px; }
.nav .tab { display: flex; align-items: center; padding: 0 16px; color: #ddd; cursor: pointer; gap: 6px; }
.nav .tab:hover { background: #333; text-decoration: none; }
.nav .tab.active { background: var(--orange); color: #fff; }
.nav .spacer { flex: 1; }
.nav .right { display: flex; align-items: center; padding: 0 12px; gap: 14px; color: #bbb; }
.nav .right a { color: #ddd; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px 40px; }
.selectbox { background: #e8e8e8; border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; margin: 12px 0; }
.selectbox label { display: block; font-size: 17px; margin-bottom: 6px; }
select, input[type=text], input[type=password], input[type=number], textarea { width: 100%; padding: 7px 10px; border: 1px solid #ccc; border-radius: 4px; background: #fff; font: inherit; color: inherit; }
select { height: 34px; padding: 4px 8px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9ec5e8; border-color: #66afe9; }
.row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: end; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: inherit; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #333; cursor: pointer; }
.btn:hover { background: #ececec; text-decoration: none; } .btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--blue); border-color: #2e6da4; color: #fff; } .btn.primary:hover { background: #286090; }
.btn.danger { background: var(--err); border-color: #ac2925; color: #fff; }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; align-items: center; }
.iconbtn { border: 0; background: none; cursor: pointer; padding: 4px; color: #222; border-radius: 4px; display: inline-flex; } .iconbtn:hover { background: #e2e2e2; }
.iconbtn svg { width: 20px; height: 20px; fill: currentColor; } .iconbtn.off { color: #999; } .iconbtn.on { color: var(--ok); }

/* tables and cards */
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-weight: 700; background: #f8f8f8; border-top: 2px solid var(--line); }
td.actions, th.actions { text-align: right; white-space: nowrap; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 12px 16px; margin: 10px 0; }
.kv { display: grid; grid-template-columns: 200px 1fr; gap: 6px 14px; } .kv dt { font-weight: 700; } .kv dd { margin: 0; }
.check { color: var(--ok); margin-right: 6px; } .cross { color: #aaa; margin-right: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.status { display: inline-flex; align-items: center; gap: 6px; } .dot { width: 10px; height: 10px; border-radius: 50%; background: #aaa; display: inline-block; }
.dot.Active { background: var(--ok); } .dot.Error { background: var(--err); } .dot.Waiting { background: var(--warn); }
.badge { display: inline-block; min-width: 46px; text-align: center; padding: 8px 6px; border-radius: 50%; background: #aaa; color: #fff; font-size: 11px; font-weight: 700; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #e8e8e8; font-size: 12px; margin: 1px 2px 1px 0; }
.pill.rec { background: #fde2e0; color: #a22; } .pill.ok { background: #dff0d8; color: #2b6e2b; }

/* charts */
.chart { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px 4px; margin: 6px 0 14px; }
.chart svg { width: 100%; height: 190px; display: block; } .chart svg text { font-size: 11px; fill: #666; }
.stats { width: auto; font-size: 12px; margin: 4px 0 8px; } .stats td, .stats th { padding: 3px 12px; border: 0; background: none; }
.bars .bar { display: grid; grid-template-columns: 120px 1fr 56px; align-items: center; gap: 8px; margin: 3px 0; }
.bars .track { background: #fff; border: 1px solid #ccc; height: 30px; position: relative; }
.bars .fill { height: 100%; }
.rangesel { display: flex; gap: 10px; align-items: center; margin: 6px 0; } .rangesel select { width: auto; }

/* messages and dialogs */
.toast { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); background: #dff0d8; color: #2b6e2b; border: 1px solid #c3e0b5; padding: 8px 18px; border-radius: 4px; z-index: 60; box-shadow: 0 2px 8px #0003; }
.toast.err { background: #f2dede; color: #a94442; border-color: #e4b9b9; }
.overlay { position: fixed; inset: 0; background: #0006; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding-top: 70px; overflow: auto; }
.dialog { background: #fff; border-radius: 6px; width: min(560px, 94vw); box-shadow: 0 6px 24px #0005; margin-bottom: 40px; }
.dialog header { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 18px; } .dialog .body { padding: 16px 18px; } .dialog footer { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; background: #fafafa; }
.field { margin: 0 0 12px; } .field label { display: block; font-weight: 700; margin-bottom: 3px; } .field .hint { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* login */
.login { max-width: 380px; margin: 90px auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 26px; }
.login h1 { font-size: 26px; margin-top: 0; }
.err { color: var(--err); }

/* logs */
.logbox { background: #fff; border: 1px solid var(--line); font: 12px/1.5 Consolas, "Courier New", monospace; max-height: 560px; overflow: auto; }
.logbox div { padding: 1px 8px; white-space: pre-wrap; word-break: break-all; border-bottom: 1px solid #f0f0f0; }
.logbox .WARN { background: #fff8e1; } .logbox .ERROR { background: #fdecea; } .logbox .DEBUG { color: #888; }
.foot { color: #888; font-size: 12px; margin: 30px 0 10px; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 720px) { .kv { grid-template-columns: 1fr; } .nav .tab { padding: 0 10px; } th, td { padding: 7px 6px; } }

/* wide layout: tree on the left, content on the right (Wowza-Manager style) */
.wrap { max-width: 1500px; }
.layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 14px; }
.sidebar { background: #ececec; border: 1px solid var(--line); border-radius: 4px; padding: 8px 0 10px; position: sticky; top: 52px; max-height: calc(100vh - 64px); overflow-y: auto; }
.sidebar .h { font-size: 12px; font-weight: 700; color: #777; text-transform: uppercase; padding: 10px 14px 4px; letter-spacing: .02em; }
.sidebar a { display: block; padding: 5px 14px; color: var(--blue); }
.sidebar a:hover { background: #dedede; text-decoration: none; }
.sidebar a.active, .sidebar a.active:hover { background: var(--orange); color: #fff; }
.sidebar a.appname { font-weight: 400; }
.sidebar .tick { color: #1c7ed6; font-size: 12px; }
.sidebar .filter { width: calc(100% - 20px); margin: 6px 10px 4px; padding: 5px 8px; font-size: 13px; }
.titlebar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 8px; padding-bottom: 8px; }
.titlebar h2 { margin-top: 12px; }
.only-narrow { display: none; }
.brand { gap: 8px; } .brandtext { line-height: 1.05; } .brandtext .b1 { color: #fff; font-size: 15px; } .brandtext .b2 { color: #aaa; font-size: 9px; letter-spacing: .12em; font-weight: 700; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 12px 0 0; }
.tabs .tab { padding: 8px 16px; border: 1px solid transparent; border-radius: 4px 4px 0 0; cursor: pointer; color: var(--blue); background: none; }
.tabs .tab.on { background: #fff; border-color: var(--line); border-bottom-color: #fff; color: #333; margin-bottom: -1px; }
.logform { margin: 10px 0; } .graybox { background: #e6e6e6; border: 1px solid var(--line); padding: 12px 14px; margin-top: 8px; }
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } .only-narrow { display: block; } }

/* ---- match the Manager at full screen ---- */
html, body { background: #fff; }
.wrap { max-width: none; padding: 0 14px 40px; }
.layout { grid-template-columns: 17.5% minmax(0, 1fr); gap: 20px; }
.sidebar { position: static; max-height: none; overflow: visible; background: #f5f5f5; padding: 14px 0 16px; }
.sidebar .h { padding: 10px 18px 4px; }
.sidebar a { padding: 6px 18px; }
.sidebar a.sub { padding-left: 26px; }
.sidebar .applist a { padding: 4px 18px; }
tbody tr:nth-child(odd) td { background: #f9f9f9; }
table.kvt tbody tr:nth-child(odd) td { background: none; } table.kvt th, table.kvt td { background: none; }
th { border-top: 0; border-bottom: 2px solid var(--line); }
.selectbox, .card { background: #f5f5f5; }
.withhelp { display: grid; grid-template-columns: minmax(0, 1fr) 31%; gap: 24px; align-items: start; }
.withhelp.nohelp { grid-template-columns: minmax(0, 1fr); } .withhelp.nohelp .help { display: none; }
.help { border-left: 1px solid var(--line); padding-left: 18px; font-size: 13px; } .help p, .help li { margin: 6px 0; } .help ul { padding-left: 20px; }
.helprow { text-align: right; margin-bottom: -8px; position: relative; z-index: 1; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 10px; }
.ctl { display: grid; grid-template-columns: minmax(200px, 1.2fr) 1fr 1fr; gap: 24px; align-items: end; margin: 8px 0 4px; }
.dtrow { display: flex; gap: 6px; } .dtrow input { width: auto; flex: 1; min-width: 0; }
.tbadge { width: 42px; height: 42px; border-radius: 50%; background: #9e9e9e; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 0 4px 12px; }
.tbadge.Active { background: var(--ok); } .tbadge.Error { background: var(--err); } .tbadge.Waiting { background: var(--warn); }
.iconbtn svg { width: 22px; height: 22px; }
@media (max-width: 1100px) { .withhelp { grid-template-columns: minmax(0, 1fr); } .help { border-left: 0; padding-left: 0; } .cols2, .ctl { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; } }
/* live preview column (Incoming Streams) */
.pvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.pv { border: 1px solid var(--line); border-radius: 4px; background: #f5f5f5; padding: 6px; }
.pvhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; }
.pvhead b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvstat { color: #888; white-space: nowrap; } .pvstat.live { color: var(--ok); } .pvstat.err { color: var(--err); }
.pv video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
/* action buttons in a table row: one aligned line, same height, red record dot */
.acts { display: flex; gap: 6px; justify-content: flex-end; align-items: stretch; flex-wrap: wrap; }
.acts .btn { min-height: 28px; justify-content: center; line-height: 1; }
.recbtn svg { color: #d9534f; }
/* recordings: selection column and delete popup list */
th.chk, td.chk { width: 34px; text-align: center; padding-left: 6px; padding-right: 6px; }
tr.picked td { background: #fff4e5 !important; }
.dellist { list-style: none; margin: 10px 0; padding: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; background: #fafafa; }
.dellist li { display: flex; justify-content: space-between; gap: 14px; padding: 6px 10px; border-bottom: 1px solid #eee; } .dellist li:last-child { border-bottom: 0; }
.dellist .dn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.danger:disabled { opacity: .45; }
/* recording preview */
.pvcap { padding: 6px 2px 2px; font-size: 13px; } .pvfile { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.playing td { box-shadow: inset 3px 0 0 var(--orange); }
/* source authentication: application chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #e8f0f8; border: 1px solid #b9cfe6; border-radius: 12px; padding: 2px 4px 2px 10px; font-size: 13px; }
.chip a { cursor: pointer; color: #666; padding: 0 5px; font-weight: 700; } .chip a:hover { color: var(--err); text-decoration: none; }
.chip.ro { padding: 2px 10px; }
.allapps { display: block; margin-top: 8px; font-size: 13px; }

tr.picked td { background: #fff4e5 !important; }