/* "دیده‌بان" overview dashboard — page-specific layout. Design tokens, buttons, pills and segmented controls come from
   app.css so the overview and every inner page share one visual language. */
.ov { display: flex; flex-direction: column; gap: 20px; }
.ov button, .ov select, .ov input, .ov textarea { font-family: inherit; }
.ov-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; justify-content: space-between; }
.crumbs { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.crumbs b { color: var(--fg-2); font-weight: 600; }
.ov h1 { margin: 2px 0 0; font-size: 24px; }
.ov-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn.on { background: var(--accent-soft); color: var(--fg); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.btn svg.i { width: 16px; height: 16px; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); }
.icon-btn:hover { color: var(--fg); border-color: var(--line-2); }
.select { appearance: none; border: 1px solid var(--line); background-color: var(--surface); border-radius: 12px; padding: 7px 12px; padding-inline-start: 30px; font-size: 12.5px; color: var(--fg-2); width: auto; margin: 0;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: 14px 50%, 19px 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.select:focus { border-color: var(--accent); box-shadow: none; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-2); padding: 0 4px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live.on i { background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- KPI strip ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.kpi { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 10px; box-shadow: var(--shadow); display: grid; gap: 4px; overflow: hidden; min-width: 0; align-content: start; }
.kpi .lbl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-2); font-weight: 500; }
.kpi .lbl svg { width: 15px; height: 15px; color: var(--muted); }
.kpi .val { font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.25; display: flex; align-items: baseline; gap: 5px; direction: ltr; justify-content: flex-end; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; font-family: inherit; }
.kpi .delta { font-size: 11.5px; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.kpi .delta svg { width: 12px; height: 12px; }
.delta.bad { color: var(--crit); } .delta.good { color: var(--good); } .delta.flat { color: var(--muted); }
.kpi .foot { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kpi svg.spark { width: 100%; height: 36px; display: block; margin-top: 2px; overflow: visible; }
.kpi .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.kpi .state { flex: none; }
.kpi .meter { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; margin-top: 8px; }
.kpi .meter i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* ---------- panels ---------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.panel { grid-column: span var(--span, 6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 20px; transition: box-shadow .2s, border-color .2s, opacity .2s; }
.panel.is-max { grid-column: 1 / -1; }
.ph { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; min-width: 0; }
.ph .t { min-width: 0; flex: 1; }
.ph h2 { margin: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph .sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph .acts { display: flex; gap: 4px; flex: none; }
.ph .acts button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 0; background: transparent; color: var(--muted); }
.ph .acts button:hover { background: var(--surface-2); color: var(--fg); }
.ph .acts svg.i { width: 16px; height: 16px; }
.grip { display: none; color: var(--muted); cursor: grab; }
.edit .grip { display: grid; }
.edit .panel { border-style: dashed; border-color: var(--line-2); cursor: grab; }
.edit .panel .pb { pointer-events: none; opacity: .85; }
.hide-btn { display: none !important; }
.edit .hide-btn { display: grid !important; }
.pb { padding: 4px 12px 12px; min-width: 0; position: relative; }
.ov .chart { height: 270px; width: 100%; margin: 0; }
.panel.is-max .chart { height: 440px; }
.ov .empty { padding: 40px 12px; text-align: center; color: var(--muted); }

/* tooltip (echarts html) */
.tt { min-width: 170px; font-family: Vazirmatn, Tahoma, sans-serif; }
.tt-h { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; font-family: var(--mono); }
.tt-r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.9; }
.tt-r i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.tt-r span { color: var(--fg-2); flex: 1; }
.tt-r b { font-family: var(--mono); font-weight: 600; color: var(--fg); direction: ltr; }

/* clients table */
.tbl-wrap { overflow-x: auto; }
.ov table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ov th { text-align: start; font-weight: 600; color: var(--muted); font-size: 11.5px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
.ov th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.ov th button:hover { color: var(--fg); }
.ov td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ov tr:last-child td { border-bottom: 0; }
.ov tbody tr:hover td { background: var(--surface-2); }
.host { font-family: var(--mono); font-weight: 500; direction: ltr; text-align: start; }
.hostlink { color: var(--fg); }
.hostlink:hover { color: var(--accent-text); }
.bar { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.bar .track { flex: 1; height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.bar .track i { display: block; height: 100%; border-radius: 99px; transition: width .6s; }
.bar span { font-family: var(--mono); font-size: 12px; width: 38px; text-align: end; direction: ltr; }

/* alerts */
.alerts { display: flex; flex-direction: column; gap: 8px; max-height: 288px; overflow: auto; padding-inline-end: 2px; }
.ov .alert { display: grid; grid-template-columns: 4px 1fr auto; gap: 12px; align-items: center; padding: 10px 10px 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin: 0; }
.alert .stripe { align-self: stretch; border-radius: 4px; background: var(--c); }
.alert .ttl { font-weight: 600; font-size: 13px; line-height: 1.5; }
.alert .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.alert.acked { opacity: .55; }
.alert.acked .stripe { background: var(--muted); }
.ack { border: 1px solid var(--line-2); background: transparent; border-radius: 9px; font-size: 11.5px; padding: 4px 10px; color: var(--fg-2); }
.ack:hover { color: var(--fg); border-color: var(--accent); }

/* logs */
.logbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 2px 4px 10px; }
.query { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 0 12px; min-width: 0; margin: 0; }
.query:focus-within { border-color: var(--accent); }
.query svg { color: var(--muted); }
.query input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; box-shadow: none; padding: 9px 0; margin: 0; font-family: var(--mono); font-size: 12.5px; direction: ltr; text-align: left; }
.query input:focus { box-shadow: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: transparent; border-radius: 99px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; font-family: var(--mono); display: inline-flex; gap: 6px; align-items: center; color: var(--fg-2); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.chip em { font-style: normal; color: var(--muted); font-weight: 500; }
.chip.off { opacity: .45; text-decoration: line-through; }
.logs { direction: ltr; text-align: left; font-family: var(--mono); font-size: 12.3px; height: 340px; overflow: auto; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.panel.is-max .logs { height: 560px; }
.ll { display: grid; grid-template-columns: 96px 64px 96px 84px minmax(0, 1fr); gap: 12px; padding: 5px 14px; border-bottom: 1px solid var(--line); align-items: baseline; cursor: pointer; }
.ll:hover { background: var(--surface-3); }
.ll .ts { color: var(--muted); } .ll .h { color: var(--fg-2); } .ll .src { color: var(--muted); }
.ll .h, .ll .src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ll .msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.ll.open .msg { white-space: pre-wrap; word-break: break-word; }
.ll .det { grid-column: 1 / -1; margin: 6px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--fg-2); white-space: pre-wrap; word-break: break-word; cursor: text; }
.lv { font-weight: 700; font-size: 10.5px; padding: 1px 0; border-radius: 6px; text-align: center; letter-spacing: .4px; }
.lv.Critical, .lv.Error { background: var(--crit-soft); color: var(--crit); }
.lv.Warning { background: var(--warn-soft); color: var(--warn); }
.lv.Information { background: var(--info-soft); color: var(--info); }
.lv.Verbose { background: color-mix(in srgb, var(--debug) 18%, transparent); color: var(--debug); }
.ll.Critical, .ll.Error { box-shadow: inset 3px 0 0 var(--crit); }
mark { background: color-mix(in srgb, var(--warn) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.logfoot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); padding: 8px 4px 0; }
.logfoot code { font-size: 11px; }

/* scoped KPI bands (group / section / tag) */
.bands-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
/* each of the three bands (group / section / tag) is its own framed block with a coloured top edge, like a separate chart */
.band { --band: var(--accent); position: relative; display: grid; gap: 12px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.band::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; background: var(--band); }
.bands-3 .band:nth-child(2) { --band: var(--info); }
.bands-3 .band:nth-child(3) { --band: var(--warn); }
.band .kpi { background: var(--surface-2); box-shadow: none; }
.band-h { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--fg); }
.band-empty { color: var(--muted); font-size: 12px; padding: 14px; border: 1px dashed var(--line-2); border-radius: 12px; text-align: center; }
.band .kpi .head { flex-wrap: wrap; row-gap: 4px; }
.band .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.band .kpi { min-height: 158px; }
.band .kpi .val { font-size: 22px; }
/* "bare" panels (scope bands, server health) drop their own box so the cards sit on the page exactly like the first row */
.panel.bare { background: transparent; border-color: transparent; box-shadow: none; }
.panel.bare .ph { padding-inline: 2px; }
.panel.bare .pb { padding-inline: 0; }
.edit .panel.bare { border-color: var(--line-2); }
.band .kpi .foot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.band .band-h .select { min-width: 200px; max-width: 280px; padding-inline-end: 14px; }

/* settings drawer */
.scrim { position: fixed; inset: 0; background: rgba(5,8,16,.5); z-index: 40; }
.drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(380px, 100vw); z-index: 50; background: var(--surface); border-inline-start: 1px solid var(--line-2); box-shadow: 0 0 60px -10px rgba(0,0,0,.5); display: flex; flex-direction: column; animation: slide .22s ease-out; }
@keyframes slide { from { transform: translateX(-24px); opacity: 0; } }
.dh { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.dh h3 { margin: 0; font-size: 15px; flex: 1; }
.dh small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.db { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 20px; }
.field { display: grid; gap: 8px; }
.field > label, .field > .fl { font-size: 12px; font-weight: 600; color: var(--fg-2); margin: 0; }
.field .seg { width: 100%; display: flex; }
.field .seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; }
.txt { border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 8px 12px; width: 100%; margin: 0; }
.sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; margin: 0; color: var(--fg); }
.sw input { appearance: none; width: 36px; height: 20px; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; border: 0; }
.sw input::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; }
.sw input:checked { background: var(--accent); }
.sw input:checked::after { inset-inline-start: 18px; }
.switches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pal { border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 10px; display: grid; gap: 8px; text-align: start; font-size: 12px; color: var(--fg-2); }
.pal[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; color: var(--fg); }
.pal .sw-row { display: flex; gap: 3px; }
.pal .sw-row i { flex: 1; height: 14px; border-radius: 4px; }
.thr { display: flex; gap: 8px; align-items: center; }
.thr input[type=number] { width: 110px; direction: ltr; font-family: var(--mono); margin: 0; }
.df { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.df .btn { flex: 1; justify-content: center; }

/* add-panel menu + edit bar */
.menu-wrap { position: relative; }
.menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 14px; padding: 6px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); }
.menu button { display: flex; width: 100%; gap: 10px; align-items: center; border: 0; background: transparent; padding: 8px 10px; border-radius: 9px; text-align: start; font-size: 13px; color: var(--fg-2); }
.menu button:hover { background: var(--surface-2); color: var(--fg); }
.menu .none { padding: 10px; color: var(--muted); font-size: 12.5px; }
.editbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); font-size: 13px; }
.editbar p { margin: 0; flex: 1; min-width: 200px; color: var(--fg-2); }

@media (max-width: 1280px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .panel { grid-column: span 12; } .panel.s4, .panel.s6 { grid-column: span 6; } .bands-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .panel, .panel.s4, .panel.s6 { grid-column: span 12; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .val { font-size: 22px; }
  .ll { grid-template-columns: 70px 52px minmax(0, 1fr); gap: 8px; }
  .ll .h, .ll .src { display: none; }
  .ov .chart { height: 240px; }
  .ov h1 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* server health: eight cards, four per row */
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Veeam rows: one row of cards per backup server */
.bk-rows { display: grid; gap: 14px; }
.bk-repos { margin-block-start: 2px; }

/* one framed group per Veeam server, so the cards of one server are clearly apart from the next */
.bk-rows { gap: 18px; }
.bk-srv { display: grid; gap: 12px; padding: 12px 14px 14px; border: 1px solid var(--line-2, var(--line)); border-radius: calc(var(--r, 16px) + 2px); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.bk-srv-h { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; padding: 2px 4px 8px; border-block-end: 1px solid var(--line); }
.bk-srv-h b { font-size: 14.5px; }
.bk-srv .dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--muted); }
.bk-srv .dot.ok { background: var(--good); } .bk-srv .dot.warn { background: var(--warn); } .bk-srv .dot.bad { background: var(--crit); }
.bk-srv .bk-repos { margin-block-start: 0; }