/* SyncTV portal UI cleanup v1.
 * Final consistency layer only: no routing, billing, entitlement, or provider behavior.
 */

/* ---------- Dark theme: Broadcast Control ---------- */
html[data-synctv-theme="dark"] body.app-body .connection-check-card,
html[data-synctv-theme="dark"] body.app-body .connection-reading{
  background:#141d2d!important;
  border-color:#2c3a53!important;
  color:#edf4ff!important;
  box-shadow:none!important;
}
html[data-synctv-theme="dark"] body.app-body .connection-reading span,
html[data-synctv-theme="dark"] body.app-body .connection-guidance{
  color:#aab7cc!important;
}
html[data-synctv-theme="dark"] body.app-body input,
html[data-synctv-theme="dark"] body.app-body select,
html[data-synctv-theme="dark"] body.app-body textarea{
  background:#101a2a!important;
  border-color:#33435f!important;
  color:#edf4ff!important;
}
html[data-synctv-theme="dark"] body.app-body input::placeholder,
html[data-synctv-theme="dark"] body.app-body textarea::placeholder{color:#8290a8!important}
html[data-synctv-theme="dark"] body.app-body .technical-details,
html[data-synctv-theme="dark"] body.app-body .technical-details .detail-grid>div,
html[data-synctv-theme="dark"] body.app-body .mini-card,
html[data-synctv-theme="dark"] body.app-body .tip-card{
  background:#141d2d!important;
  border-color:#2c3a53!important;
  color:#edf4ff!important;
}

/* ---------- Dark theme: logged-out email/password access ---------- */
html[data-synctv-theme="dark"] #loginView .web-auth-switch{
  border-color:#2c3a53!important;
}
html[data-synctv-theme="dark"] #loginView .web-auth-link{
  color:#9f8cff!important;
}
html[data-synctv-theme="dark"] #loginView .web-auth-box{
  background:#141d2d!important;
  border-color:#33435f!important;
  color:#edf4ff!important;
  box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
}
html[data-synctv-theme="dark"] #loginView .web-auth-tabs button{
  background:#22304a!important;
  color:#c7d3e5!important;
}
html[data-synctv-theme="dark"] #loginView .web-auth-tabs button.active{
  background:linear-gradient(135deg,#20bceb,#7458e7)!important;
  color:#fff!important;
}
html[data-synctv-theme="dark"] #loginView .web-auth-form label{
  color:#c6d2e5!important;
}
html[data-synctv-theme="dark"] #loginView .web-auth-form input{
  background:#0d1625!important;
  border-color:#3a4a66!important;
  color:#edf4ff!important;
  box-shadow:none!important;
}
html[data-synctv-theme="dark"] #loginView .web-auth-form input:focus{
  border-color:#6d75ef!important;
  outline:3px solid rgba(93,108,235,.22)!important;
}
html[data-synctv-theme="dark"] #loginView .web-auth-form button.secondary{
  background:#1a263b!important;
  color:#e1e9f6!important;
  border:1px solid #33435f!important;
}
html[data-synctv-theme="dark"] #loginView .web-auth-note,
html[data-synctv-theme="dark"] #loginView .web-auth-status{
  color:#aab7cc!important;
}
html[data-synctv-theme="dark"] #loginView .web-auth-status.bad{color:#ff9baa!important}
html[data-synctv-theme="dark"] #loginView .web-auth-status.good{color:#78e4ba!important}

/* Security/recovery overlays use the same dark surfaces when opened later. */
html[data-synctv-theme="dark"] .secure-card,
html[data-synctv-theme="dark"] .security-tool{
  background:#141d2d!important;
  border-color:#33435f!important;
  color:#edf4ff!important;
}
html[data-synctv-theme="dark"] .secure-card p,
html[data-synctv-theme="dark"] .security-tool small{color:#aab7cc!important}
html[data-synctv-theme="dark"] .secure-actions .secondary{background:#22304a!important;color:#e1e9f6!important}

/* ---------- Dark theme: Add-ons and À La Carte ---------- */
html[data-synctv-theme="dark"] #portalView #addons input,
html[data-synctv-theme="dark"] #portalView #addons select,
html[data-synctv-theme="dark"] #portalView #addons textarea,
html[data-synctv-theme="dark"] #portalView #alaCarteWorkspace input,
html[data-synctv-theme="dark"] #portalView #alaCarteWorkspace select,
html[data-synctv-theme="dark"] #portalView #alaCarteWorkspace textarea{
  background:#101a2a!important;
  border-color:#33435f!important;
  color:#edf4ff!important;
}
html[data-synctv-theme="dark"] #portalView #addons input::placeholder,
html[data-synctv-theme="dark"] #portalView #addons textarea::placeholder,
html[data-synctv-theme="dark"] #portalView #alaCarteWorkspace input::placeholder,
html[data-synctv-theme="dark"] #portalView #alaCarteWorkspace textarea::placeholder{color:#8290a8!important}

html[data-synctv-theme="dark"] #portalView #alaCarteOverviewCard,
html[data-synctv-theme="dark"] #portalView .ala-overview-item,
html[data-synctv-theme="dark"] #portalView .ala-overview-item.legacy,
html[data-synctv-theme="dark"] #portalView .ala-overview-browse,
html[data-synctv-theme="dark"] #portalView .ala-card,
html[data-synctv-theme="dark"] #portalView .ala-info,
html[data-synctv-theme="dark"] #portalView .ala-feature,
html[data-synctv-theme="dark"] #portalView .ala-state,
html[data-synctv-theme="dark"] #portalView .ala-loading,
html[data-synctv-theme="dark"] #portalView .ala-legacy-panel,
html[data-synctv-theme="dark"] #portalView #addons .addon-card,
html[data-synctv-theme="dark"] #portalView #addons .addon-tool,
html[data-synctv-theme="dark"] #portalView #addons .addon-service,
html[data-synctv-theme="dark"] #portalView #addons .addon-empty,
html[data-synctv-theme="dark"] #portalView #addons .addon-provisioning-panel,
html[data-synctv-theme="dark"] #portalView #addons .addon-provisioning-box,
html[data-synctv-theme="dark"] #portalView #addons .addon-provisioning-service,
html[data-synctv-theme="dark"] #portalView #addons .addon-password-reset{
  background:#141d2d!important;
  border-color:#2c3a53!important;
  color:#edf4ff!important;
  box-shadow:none!important;
}
html[data-synctv-theme="dark"] #portalView .ala-overview-item.legacy{
  background:linear-gradient(110deg,#181c2d 0%,#211d36 48%,#132536 100%)!important;
  border-color:#4a3d6b!important;
}
html[data-synctv-theme="dark"] #portalView .ala-overview-item-main small,
html[data-synctv-theme="dark"] #portalView .ala-overview-note,
html[data-synctv-theme="dark"] #portalView .ala-overview-footer small,
html[data-synctv-theme="dark"] #portalView .ala-helper,
html[data-synctv-theme="dark"] #portalView #addons .helper,
html[data-synctv-theme="dark"] #portalView #addons small{color:#aab7cc!important}
html[data-synctv-theme="dark"] #portalView .ala-overview-legacy-meta{color:#d6c08b!important}
html[data-synctv-theme="dark"] #portalView .ala-overview-status{background:#26334a!important;color:#c7d3e5!important}
html[data-synctv-theme="dark"] #portalView .ala-overview-status.active{background:#15392f!important;color:#78e4ba!important}
html[data-synctv-theme="dark"] #portalView .ala-overview-status.legacy{background:#3a2f16!important;color:#f1d68d!important}
html[data-synctv-theme="dark"] #portalView .ala-overview-status.attention{background:#44202b!important;color:#ff9baa!important}
html[data-synctv-theme="dark"] #portalView .ala-overview-add:disabled{background:#22304a!important;color:#93a1b8!important}
html[data-synctv-theme="dark"] #portalView .ala-overview-item.legacy .ala-overview-add:disabled{background:#2b2540!important;color:#cbbcff!important}
html[data-synctv-theme="dark"] #portalView .ala-badge{background:#26334a!important;color:#c7d3e5!important}
html[data-synctv-theme="dark"] #portalView .ala-badge.active{background:#15392f!important;color:#78e4ba!important}
html[data-synctv-theme="dark"] #portalView .ala-badge.legacy{background:#3a2f16!important;color:#f1d68d!important}
html[data-synctv-theme="dark"] #portalView .ala-badge.attention{background:#44202b!important;color:#ff9baa!important}

/* Hover/focus/disabled states must remain dark rather than flashing light. */
html[data-synctv-theme="dark"] #portalView #addons button:not(.primary):not(.success):not(.danger):hover,
html[data-synctv-theme="dark"] #portalView #alaCarteWorkspace button:not(.primary):not(.success):not(.danger):hover,
html[data-synctv-theme="dark"] body.app-body button.secondary:hover{
  background:#26344d!important;
  border-color:#41516e!important;
  color:#f4f7fd!important;
}
html[data-synctv-theme="dark"] #portalView #addons :disabled,
html[data-synctv-theme="dark"] #portalView #alaCarteWorkspace :disabled{opacity:.72}

/* ---------- À La Carte modal scrolling ----------
 * #alaCarteWorkspace is the only vertical modal scroll container. The header
 * stays in normal flow so it never floats over or hides plan cards.
 */
#portalView .content.ala-carte-workspace-open>#alaCarteWorkspace{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scroll-padding-top:24px!important;
  padding-bottom:max(72px,8vh)!important;
}
#portalView #alaCarteWorkspace .ala-tabbar{
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  margin:0 auto 18px!important;
  background:#fff!important;
  isolation:isolate;
}
html[data-synctv-theme="dark"] #portalView #alaCarteWorkspace .ala-tabbar{
  background:#141d2d!important;
  border-color:#33435f!important;
}
#portalView #alaCarteWorkspace .ala-card,
#portalView #alaCarteWorkspace .ala-info,
#portalView #alaCarteWorkspace .ala-legacy-panel,
#portalView #alaCarteWorkspace .ala-loading{
  overflow-y:visible!important;
}
#portalView #alaCarteWorkspace>*:last-child{margin-bottom:36px!important}
#portalView #alaCarteWorkspace :focus-visible{scroll-margin-top:24px;scroll-margin-bottom:48px}

/* ---------- Typography/readability ---------- */
#portalView{
  font-size:16px;
  line-height:1.5;
}
#portalView p,
#portalView .body-copy,
#portalView .support-message,
#portalView .addon-service,
#portalView .addon-tool,
#portalView .ala-card,
#portalView .ala-info,
#portalView .transaction-row{font-size:15px}
#portalView table,
#portalView .table,
#portalView .list-row,
#portalView .request-row,
#portalView .support-ticket{font-size:14px}
#portalView small,
#portalView .helper,
#portalView .meta,
#portalView .support-meta,
#portalView .web-auth-note{font-size:13px;line-height:1.45}
#portalView button,
#portalView input,
#portalView select,
#portalView textarea{font-size:14px;line-height:1.35}

/* Override older runtime-injected À La Carte fine print. */
#portalView .ala-overview-head p{font-size:14px!important;line-height:1.5!important}
#portalView .ala-overview-item-main strong{font-size:15px!important}
#portalView .ala-overview-item-main small,
#portalView .ala-overview-note,
#portalView .ala-overview-legacy-meta,
#portalView .ala-overview-footer small{font-size:13px!important;line-height:1.45!important}
#portalView .ala-overview-status{font-size:13px!important}
#portalView .ala-overview-add,
#portalView .ala-overview-browse{font-size:14px!important;line-height:1.25!important;min-height:38px}
#portalView .ala-hero-stat span,
#portalView .ala-badge,
#portalView .ala-price span,
#portalView .ala-helper{font-size:13px!important;line-height:1.4!important}
#portalView .ala-return,
#portalView .ala-feature,
#portalView .ala-delivery-note,
#portalView .ala-state,
#portalView .ala-loading{font-size:14px!important;line-height:1.5!important}

/* Sidebar hover is not an active state; only the controller-owned current item is persistent. */
#portalView .side nav a:not([data-nav-current="true"]):hover{filter:none}
#portalView .side nav a[data-nav-current="true"]{isolation:isolate}

@media(max-width:700px){
  #portalView{font-size:15px}
  #portalView .content.ala-carte-workspace-open>#alaCarteWorkspace{
    scroll-padding-top:18px!important;
    padding-bottom:72px!important;
  }
  #portalView #alaCarteWorkspace .ala-tabbar{margin-bottom:14px!important}
  #portalView #alaCarteWorkspace :focus-visible{scroll-margin-top:18px}
  #portalView .ala-overview-actions{flex-wrap:wrap}
  #portalView .ala-overview-status{white-space:normal!important;text-align:center}
}