:root {
  --vp-primary: #c17941;
  --vp-accent: #a86633;
  --vp-ink: #0b1f3a;
  --vp-muted: #64748b;
}

.vetpro-brand-logo {
  height: 48px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
}

.header-logo,
.dock-logo {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px;
  overflow: visible !important;
  background-image: var(--vp-logo, url("/assets/vetpro/images/favicon.svg"));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}

/* The server may still ship the old app logo; never show it. */
.header-logo img,
.dock-logo img {
  opacity: 0 !important;
}

.header-logo img,
.dock-logo img {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: contain !important;
  border-radius: 8px;
}

.navbar-brand img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 300px;
  object-fit: contain;
}

/* Legacy apps/desktop screen: app icons are square, wordmarks are not. */
.desktop-icon .icon-container {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-icon .app-icon {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain !important;
}

/* Keep the login/website wordmark readable. */
img.app-logo {
  max-height: 64px;
  width: auto;
  object-fit: contain;
}

.navbar-brand .vetpro-brand-logo,
.navbar-brand > img {
  height: 44px;
  width: auto;
}

img.app-logo,
.app-logo {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

a[href*="frappe.io"],
a[href*="erpnext.com"],
a[href*="frappeframework.com"],
a[href*="frappe.school"],
a[href*="frappecloud.com"],
a[href*="frappe.tech"],
a[href*="discuss.frappe.io"],
a[href*="docs.frappe.io"],
a[href*="github.com/frappe"],
a[href*="erpnext.org"] {
  display: none !important;
}

/* Auth pages: the gradient belongs to the whole page, not to the login
   section. Frappe's login template puts .for-login inside .page-content-wrapper,
   whose own min-height/padding made the section a viewport-sized block with
   white bands above and below it. */
body:has(.for-login),
body:has(.for-forgot),
body:has(.for-signup),
body:has(.for-login-with-email-link) {
  background:
    radial-gradient(1100px 520px at 12% -5%, color-mix(in srgb, var(--vp-primary) 22%, transparent), transparent 62%),
    radial-gradient(900px 500px at 100% 100%, color-mix(in srgb, var(--vp-accent) 14%, transparent), transparent 60%),
    linear-gradient(165deg, #fdfbf7 0%, #f5f0e8 58%, #efe3d4 100%);
  background-attachment: fixed;
}

/* Center the card in the viewport. #page-login is the id Frappe puts on the
   login page container; the :has() variant covers the other auth sections. */
body:has(.for-login) .page-content-wrapper,
body:has(.for-forgot) .page-content-wrapper,
body:has(.for-signup) .page-content-wrapper,
body:has(.for-login-with-email-link) .page-content-wrapper,
#page-login .page-content-wrapper {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 32px 16px;
}

body:has(.for-login) .page-content-wrapper > main,
#page-login .page-content-wrapper > main {
  width: 100%;
}

#page-login .page-breadcrumbs,
#page-login .page-header-wrapper,
#page-login .page-footer {
  display: none;
}

/* The sections are wrappers only. */
.for-login,
.for-forgot,
.for-signup,
.for-login-with-email-link {
  width: 100%;
  min-height: 0;
  background: none;
}

.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card,
.for-login-with-email-link .page-card {
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--vp-primary) 18%, #fff);
  box-shadow: 0 2px 6px rgba(31, 25, 19, 0.05), 0 28px 70px -28px rgba(31, 25, 19, 0.35);
}

/* Frappe's own mobile login card is full-bleed; don't inset it. */
@media (max-width: 575.98px) {
  body:has(.for-login) .page-content-wrapper,
  #page-login .page-content-wrapper {
    padding: 0;
  }
}

.for-login .page-card .app-logo,
.for-forgot .page-card .app-logo,
.for-signup .page-card .app-logo {
  max-height: 54px;
  margin-bottom: 6px;
}

.for-login .btn-primary,
.for-login .es-button[data-variant="solid"],
.for-forgot .btn-primary,
.for-signup .btn-primary {
  background-color: var(--vp-primary);
  border-color: var(--vp-primary);
}

.web-footer {
  border-top: 3px solid var(--vp-primary);
}

.vetpro-credit {
  color: var(--vp-muted);
  font-size: 12px;
  letter-spacing: 0.4px;
}

.footer-powered:has(a[href*="frappe.io"]),
.footer-powered:has(a[href*="erpnext.com"]),
.footer-powered:has(a[href*="frappeframework.com"]) {
  display: none !important;
}

a[href*="youtube.com"],
a[href*="youtu.be"] {
  display: none !important;
}

@media (max-width: 768px) {
  .header-logo,
  .dock-logo,
  .header-logo img,
  .dock-logo img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
  .navbar-brand img,
  .vetpro-brand-logo {
    height: 40px !important;
    max-height: 40px !important;
  }
}

/* Hide the developer shell and duplicate clinical launcher before JS runs. */
.desktop-icon:has(img[alt="Framework"]),
.desktop-icon:has(img[alt="Build"]),
.desktop-icon:has(img[alt="Marley Health"]),
.desktop-icon:has(img[alt="Vet Pro Clinical"]) {
  display: none !important;
}

.vetpro-payout-box {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0;
  background: var(--fg-color);
}
.vetpro-payout-status.ok b { color: var(--green-600); }
.vetpro-payout-status.bad b { color: var(--red-600); }
.vetpro-payout-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }


.desktop-page .header-logo,
.desktop-page .header-logo .icon-container,
.desktop-page .header-logo img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}