/* ======================================================================
   UA pagewise rebuild: Subscriber View
   Scope: subscribers_view.php only.  Do not generalize this contract.
   Reference: add-subscriber square/neutral form language.
   ====================================================================== */

html body.ua-design-v2 .content-wrapper.ua-sub-child-view{
  --sv-surface:#111827;
  --sv-input:#0b1220;
  --sv-line:rgba(51,65,85,.82);
  --sv-line-soft:rgba(30,41,59,.82);
  --sv-text:#e5e7eb;
  --sv-muted:rgba(156,163,175,.92);
  --sv-gold:#facc15;
  --sv-green:#34d399;
  color:var(--sv-text)!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view,
html body.ua-design-v2 .content-wrapper.ua-sub-child-view *{
  box-sizing:border-box;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view :where(section.content,.content,.ua-page-v2){
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-page-v2{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:10px!important;
  direction:rtl!important;
}

/* In dashboard tabs the parent window already owns the title bar; keep inner chrome light. */
html body.ua-subscriber-modal-embed .content-wrapper.ua-sub-child-view .ua-page-head{
  display:none!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-page-head{
  margin:0 0 10px!important;
  padding:0 0 10px!important;
  border:0!important;
  border-bottom:1px solid var(--sv-line-soft)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-page-title h1{
  margin:0!important;
  color:var(--sv-gold)!important;
  font-size:18px!important;
  font-weight:800!important;
  line-height:1.45!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-page-title p{
  margin:4px 0 0!important;
  color:var(--sv-muted)!important;
  font-size:12px!important;
  font-weight:500!important;
}

/* Panels: one square neutral surface, no turquoise shells, no stacked glow. */
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-panel-v2,
html body.ua-design-v2.ua-authed .content-wrapper.ua-sub-child-view .ua-panel-v2,
html body.ua-page-dashboard .content-wrapper.ua-sub-child-view .ua-panel-v2{
  margin:0 0 10px!important;
  padding:0!important;
  border:1px solid var(--sv-line-soft)!important;
  border-radius:0!important;
  background:var(--sv-surface)!important;
  background-color:var(--sv-surface)!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-panel-body,
html body.ua-design-v2.ua-authed .content-wrapper.ua-sub-child-view .ua-panel-body,
html body.ua-page-dashboard .content-wrapper.ua-sub-child-view .ua-panel-body{
  margin:0!important;
  padding:12px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Top subscriber summary */
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-summary{
  min-width:220px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  color:var(--sv-text)!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-summary strong{
  color:var(--sv-gold)!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1.35!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-summary small{
  color:var(--sv-muted)!important;
  font-size:12px!important;
  font-weight:700!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .badge{
  border-radius:6px!important;
  padding:4px 8px!important;
  font-size:11px!important;
  font-weight:800!important;
  box-shadow:none!important;
}

/* Page actions and buttons: slightly soft only; fields/cards remain square. */
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-page-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  align-items:center!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view :where(.btn,.ua-page-actions .btn,.ua-form-actions .btn){
  min-height:34px!important;
  padding:7px 13px!important;
  border-radius:6px!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.3!important;
  box-shadow:none!important;
}

/* Tabs: rectangular compact strip matching the new form tone. */
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-tabs-v2,
html body.ua-design-v2.ua-authed .content-wrapper.ua-sub-child-view .ua-tabs-v2{
  display:flex!important;
  gap:8px!important;
  margin:0 0 10px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-tab-v2,
html body.ua-design-v2.ua-authed .content-wrapper.ua-sub-child-view .ua-tab-v2{
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px 14px!important;
  border:1px solid var(--sv-line)!important;
  border-radius:0!important;
  background:var(--sv-input)!important;
  color:var(--sv-muted)!important;
  font-size:12px!important;
  font-weight:800!important;
  text-decoration:none!important;
  box-shadow:none!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-tab-v2.is-active,
html body.ua-design-v2.ua-authed .content-wrapper.ua-sub-child-view .ua-tab-v2.is-active{
  border-color:rgba(250,204,21,.54)!important;
  color:var(--sv-gold)!important;
  background:#101827!important;
  box-shadow:none!important;
}

/* Data metrics rebuilt like the add-subscriber fields: label above value. */
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric-grid,
html body.ua-design-v2.ua-authed .content-wrapper.ua-sub-child-view .ua-child-metric-grid,
html body.ua-page-dashboard .content-wrapper.ua-sub-child-view .ua-child-metric-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px 12px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric,
html body.ua-design-v2.ua-authed .content-wrapper.ua-sub-child-view .ua-child-metric,
html body.ua-page-dashboard .content-wrapper.ua-sub-child-view .ua-child-metric{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric::before,
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric::after{
  content:none!important;
  display:none!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric > b{
  display:block!important;
  margin:0 0 4px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--sv-muted)!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.45!important;
  text-align:right!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric > :where(span,code){
  width:100%!important;
  min-height:34px!important;
  height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:0!important;
  padding:6px 10px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  border:1px solid var(--sv-line)!important;
  border-radius:0!important;
  background:var(--sv-input)!important;
  background-color:var(--sv-input)!important;
  background-image:none!important;
  color:var(--sv-text)!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.5!important;
  direction:ltr!important;
  text-align:left!important;
  font-family:inherit!important;
  box-shadow:none!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric > span{
  direction:rtl!important;
  text-align:right!important;
  justify-content:flex-end!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric > code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-note,
html body.ua-design-v2.ua-authed .content-wrapper.ua-sub-child-view .ua-child-note,
html body.ua-page-dashboard .content-wrapper.ua-sub-child-view .ua-child-note{
  margin:10px 0 0!important;
  padding:10px!important;
  min-height:52px!important;
  border:1px solid var(--sv-line)!important;
  border-radius:0!important;
  background:var(--sv-input)!important;
  background-color:var(--sv-input)!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--sv-text)!important;
  font-size:13px!important;
  line-height:1.8!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-note b{
  display:block!important;
  margin:0 0 4px!important;
  color:var(--sv-muted)!important;
  font-size:12px!important;
  font-weight:500!important;
}

/* MikroTik alert and status dots */
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-alert,
html body.ua-design-v2.ua-authed .content-wrapper.ua-sub-child-view .ua-alert{
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid var(--sv-line)!important;
  border-radius:0!important;
  background:var(--sv-input)!important;
  color:var(--sv-text)!important;
  box-shadow:none!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-dot{
  width:9px!important;
  height:9px!important;
  margin-inline-end:7px!important;
  border-radius:50%!important;
  box-shadow:none!important;
}

/* Tables inside this page only. */
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-table-wrap{
  width:100%!important;
  overflow:auto!important;
  border:1px solid var(--sv-line-soft)!important;
  border-radius:0!important;
  background:var(--sv-input)!important;
  box-shadow:none!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-table{
  width:100%!important;
  margin:0!important;
  border-collapse:collapse!important;
  color:var(--sv-text)!important;
  background:transparent!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-table th,
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-table td{
  padding:9px 10px!important;
  border:1px solid rgba(51,65,85,.46)!important;
  font-size:12px!important;
  text-align:center!important;
  vertical-align:middle!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-table th{
  color:var(--sv-gold)!important;
  font-weight:900!important;
  background:#111827!important;
}

html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-grid-single{
  grid-template-columns:minmax(0,620px)!important;
  justify-content:end!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-card{
  min-width:0!important;
  border:1px solid var(--sv-line)!important;
  border-radius:0!important;
  background:var(--sv-input)!important;
  overflow:hidden!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-card-head{
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:8px 10px!important;
  border-bottom:1px solid var(--sv-line-soft)!important;
  background:#111827!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-card-head strong{
  color:var(--sv-gold)!important;
  font-size:13px!important;
  font-weight:900!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-card-head span{
  color:#fecaca!important;
  font-size:11px!important;
  font-weight:800!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-card a{
  text-decoration:none!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-card img{
  width:100%!important;
  height:260px!important;
  max-height:260px!important;
  display:block!important;
  object-fit:contain!important;
  background:#020617!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-empty,
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-file{
  min-height:150px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:14px!important;
  color:var(--sv-muted)!important;
  font-size:13px!important;
  font-weight:800!important;
  text-align:center!important;
}
html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-file{
  color:#bfdbfe!important;
}

@media (max-width:1200px){
  html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media (max-width:860px){
  html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-panel-body.d-flex{
    align-items:flex-start!important;
  }
  html body.ua-design-v2 .content-wrapper.ua-sub-child-view .sv-id-grid{
    grid-template-columns:1fr!important;
  }
}
@media (max-width:560px){
  html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-child-metric-grid{
    grid-template-columns:1fr!important;
  }
  html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-tabs-v2,
  html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-page-actions{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-tab-v2,
  html body.ua-design-v2 .content-wrapper.ua-sub-child-view .ua-page-actions .btn{
    width:100%!important;
  }
}
