/* MME login page branding.
   Loaded via web_include_css (hooks.py) — that injects into the web/portal
   base template (templates/web.html), which the login page extends. Unlike
   app_include_css (desk only), this reaches /login.

   Scoped with body:has(section.for-login) so ONLY the login page is affected;
   other portal/web pages keep frappe's default look. The login DOM (frappe
   www/login.html + scss/login.bundle.scss):
     body > .page-content-wrapper > (section.for-login > .login-content.page-card)
   frappe paints body with var(--bg-color) (solid) and centers a 371px card.

   Unlike the desk .desktop-wrapper, body here IS the viewport, so
   background-attachment: fixed gives a reliable full-screen, responsive image. */
body:has(section.for-login) {
   background-image: url("/assets/erpnext_mining/images/background-dark.png");
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

/* Center the login card in the viewport. web.html nests the card deep:
   .page-content-wrapper > main.container > .page_content > section.for-login
   > .login-content.page-card. Centering .page-content-wrapper would center the
   whole <main> (breadcrumbs + empty footer), not the card. Instead make the
   nearest full-width ancestor of the card — .page_content — a full-height flex
   box and reset the wrappers' top padding/margins that push it down. */
body:has(section.for-login) .page-content-wrapper {
   padding-top: 0;
}

body:has(section.for-login) main.container {
   max-width: 100%;
   padding-top: 0;
   margin-top: 0;
}

body:has(section.for-login) .page_content {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Dim the photo a touch so the white card and text stay high-contrast,
   regardless of which part of the image sits behind the card. */
/* body:has(section.for-login) .page-content-wrapper {
	background-color: rgba(0, 0, 0, 0.28);
} */

/* Solid white card (frappe already uses --bg-color) + lift it off the photo
   with a shadow and clear rounding so the form reads cleanly. */
body:has(section.for-login) .login-content.page-card {
   background-color: #ffffff;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
   border-radius: 14px;
}

/* ── Vendor/customer portal pages (/rfq, /supplier-quotations, /purchase-orders,
   /purchase-invoices, /orders, /me, ...) ─────────────────────────────────────
   These are separate www pages from login, sharing one shell:
     body[data-path="portal"] wraps nav.navbar, then
     .container > .row#page-portal[data-path="<page>"] > .sidebar-column + content.
   #page-portal is present on every one of these listing/detail pages (confirmed
   against the rendered /rfq DOM), so scoping there reaches the whole group
   without touching unrelated web pages (blog, /me is inside the group too).
   Kept light-touch: red navbar to match the desk topbar (mme_theme.css) and
   an active-sidebar-item accent, no background photo — a photo behind a data
   table works against legibility where the login page's single centered card
   does not have that problem. */
body:has(#page-portal) nav.navbar {
   background: linear-gradient(90deg, #d01818 0%, #8a0f0f 100%) !important;
   border-bottom: none;
}

body:has(#page-portal) nav.navbar .navbar-brand,
body:has(#page-portal) nav.navbar .nav-link,
body:has(#page-portal) nav.navbar .navbar-toggler svg {
   color: #ffffff !important;
   stroke: #ffffff !important;
}

body:has(#page-portal) .web-sidebar .sidebar-item a.active {
   color: #d01818;
   font-weight: 600;
   border-left: 3px solid #d01818;
   padding-left: 9px;
}

/* /me (My Account): hide "Manage 3rd party apps" — frappe's own OAuth2
   provider settings link, irrelevant to a vendor/customer portal user and
   confusing to show alongside Edit Profile / Reset Password. The link's
   href is unique to this one item (confirmed against the rendered /me DOM),
   so it's targeted directly rather than by a position-based selector —
   safe to keep global (this href only ever appears on /me). */
a[href="/third_party_apps"] {
   display: none;
}

/* --- Mobile ---
   frappe's login.bundle.scss turns the card into a full-bleed, full-height
   sheet at its `xs` breakpoint (max-width: 575.98px):
     .page-card { max-width: 100%; min-height: 100svh; border-radius: 0;
                  border: none; padding: 60px 32px 32px; }
   and drops .page-content-wrapper's top padding while forcing min-height:100svh.
   That makes the card cover the whole screen and hide the background photo.
   Revert those so the card stays a centered floating card on phones too. */
@media (max-width: 575.98px) {
   body:has(section.for-login) .page_content {
      /* keep the flex-centering from above; add side gutters + vertical
         breathing room so the card never touches the screen edges. Use
         100svh (not min-height) so padding stays inside the viewport
         instead of stacking on top of frappe's forced .page-content-wrapper
         min-height and causing a scroll. */
      height: 100svh;
      min-height: 0;
      padding: 32px 20px;
      box-sizing: border-box;
   }

   body:has(section.for-login) .login-content.page-card {
      max-width: 371px;
      min-height: 0;
      border-radius: 14px;
      padding: 24px;
   }
}