/* Dashboard additions on top of the Jalvo UI Kit (jalvo.css stays a verbatim copy of the design handoff).
   Only classes that the handoff expressed as inline styles, plus WordPress specifics. */

/* WordPress admin bar (admins only) must not cover the sticky sidebar / top bar */
body.admin-bar .jv-sidebar { top: 32px; height: calc(100vh - 32px); }
@media (max-width: 782px) { body.admin-bar .jv-topbar { top: 46px; } }

/* Headings used as plain titles inside components (inline font-size in the handoff) */
.jv-empty__title { font-size: 22px; }
.jv-dialog__title { font-size: 20px; }
.jv-strong { color: var(--jv-text); }
.jv-mt-3 { margin-top: var(--jv-space-3); }
.jv-form-narrow { max-width: 720px; }

/* Target IP inputs: inline cell and form */
.jv-input--ip { width: 170px; }
.jv-input--ip-lg { max-width: 300px; }

/* "Use my own certificate" disclosure rendered as a link button */
.jv-summary { list-style: none; display: inline-flex; align-self: flex-start; }
.jv-summary::-webkit-details-marker { display: none; }

/* User box and log out link in the sidebar footer (the handoff user is a button, here it is a link) */
a.jv-user { color: var(--jv-text); text-decoration: none; }
a.jv-user:hover { border-color: var(--jv-border-strong); }
.jv-user__text { min-width: 0; }
.jv-sidebar__logout { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--jv-text-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.jv-sidebar__logout:hover { background: var(--jv-surface-hover); color: var(--jv-text); }
@media (min-width: 768px) and (max-width: 1023px) {
  .jv-sidebar__logout { width: 44px; height: 44px; justify-content: center; padding: 0; }
  .jv-sidebar__logout span { display: none; }
}

/* Mobile top bar carries the language switch; the tab bar has as many columns as items */
.jv-topbar .jv-lang a { min-width: 36px; height: 32px; }
@media (max-width: 767px) {
  .jv-tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  /* Short screens: keep the rows content-sized instead of spreading them over the viewport */
  .jv-app { align-content: start; }
}

/* Proxy server cell: name on the first line, IP below (keeps long IPs from wrapping mid-label) */
.jv-srv { display: grid; }
.jv-srv__name { font-family: var(--jv-font-body); font-weight: 600; font-size: 14px; color: var(--jv-text); }
.jv-srv__ip { color: var(--jv-text-muted); white-space: nowrap; }

@media (max-width: 767px) {
  .jv-toolbar .jv-select { flex: 1 1 100%; }
}

/* Inline editors (server picker, target IP): the field takes the whole cell, Save / Cancel wrap below it */
.jv-table .jv-inline .jv-inline__edit { flex-wrap: wrap; }
.jv-table .jv-inline .jv-inline__edit :is(.jv-select, .jv-input) { flex: 1 1 100%; min-width: 0; }

/* Astra's scroll-to-top button has no styles here (the dashboard drops theme CSS) */
#ast-scroll-top { display: none !important; }

/* "Logged in as" bar from the Login as User plugin, shown only to an admin switched into a client */
.login-as-user { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; display: flex; gap: 12px; align-items: center; padding: 8px 14px; border-radius: 8px; background: var(--jv-navy-900); color: #fff; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.login-as-user a { color: #9DC1FF; }
@media (max-width: 767px) { .login-as-user { bottom: 76px; } }

/* Plan chip header in the sidebar: plan name and state badge */
.jv-plan-chip__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }

/* Billing (inline styles in app/billing.html) */
.jv-row--between { justify-content: space-between; }
.jv-plan-name { font: 700 22px var(--jv-font-display); }
.jv-plan__price--md { font-size: 28px; }
.jv-plan__price--md .jv-small { font-family: var(--jv-font-body); font-weight: 400; }
.jv-btn--danger-text { color: var(--jv-danger-text); }
.jv-alert .jv-btn { margin-left: auto; }
.jv-dashboard .jv-plans { margin-top: var(--jv-space-2); }
.jv-dashboard .jv-segmented { justify-self: start; align-self: flex-start; }
.jv-section-title { font-size: 24px; }
.jv-dashboard .jv-plans { margin-inline: 0; }

/* Auth pages (inline styles in pages/login.html and register.html) */
.jv-auth__title { font-size: 30px; }
.jv-auth__claim { font-size: clamp(28px, 2.6vw, 40px); max-width: 480px; }
.jv-auth__list { max-width: 420px; }
.jv-auth__regions { max-width: 520px; grid-template-columns: 1.4fr 1fr; }
.jv-auth__regions .jv-region { padding: 18px; }
.jv-auth__regions .jv-region__num { font-size: 32px; }
.jv-auth__regions .jv-rack { grid-template-columns: repeat(auto-fill, 22px); }
.jv-check--flush { padding: 0; }
.jv-empty__icon--success { background: var(--jv-success-soft); color: var(--jv-success); }
/* Honeypot for bots: off-screen, not display:none (some bots skip hidden fields) */
.jv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Account (inline styles in app/account.html) */
.jv-form-wide { max-width: 820px; }
.jv-fieldset__title { font-size: 18px; }
.jv-fieldset--danger { border-color: var(--jv-danger); }
.jv-danger-text { color: var(--jv-danger-text); }
/* Fields in a form grid keep their natural height (a neighbour with a hint must not stretch them) */
.jv-form-grid > .jv-field { align-content: start; align-self: start; }

/* Wizard, servers and overview (inline styles in the design) */
.jv-wizard__servers { max-width: 1000px; }
.jv-normal { font-weight: 400; }
.jv-server.is-disabled { opacity: .5; cursor: not-allowed; }
.jv-server--static { cursor: default; }
.jv-server.is-yours { border-color: var(--jv-primary); }
.jv-picker--servers { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.jv-ml-auto { margin-left: auto; }
.jv-dns-view { max-width: 1100px; }
.jv-att__domain { min-width: 180px; }
.jv-att__btn { margin-left: auto; }

/* WCAG 1.4.1: links inside running text are underlined, not told apart by colour alone */
.jv-cookie p a, .jv-caption a:not(.jv-btn), .jv-auth__switch a, .jv-hint a, .jv-error a, .jv-alert a:not(.jv-btn), .jv-banner a:not(.jv-btn), .jv-muted a:not(.jv-btn), .jv-small a:not(.jv-btn), .jv-note a, .jv-prose p a, .jv-prose li a, .jv-check a { text-decoration: underline; text-underline-offset: 2px; }
/* API examples on the Account screen */
.jv-code{margin:8px 0;padding:12px;border-radius:8px;background:var(--jv-neutral-100);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-all;overflow-x:auto}