/* MSP Worx -- customer portal theme: the mspworx.com look (navy, MSP Worx
   blue, Mulish, the MSP Worx logo) on every portal page, the sign-in pages,
   and the public proposal and invoice pages.

   Cosmetic only; the billing rules live in mw-portal.css. Loaded by the
   </head> sub_filter on /portal/ in nginx.conf, after the portal's own sheet,
   so plain :root declarations here win over the portal's (which sit in
   Tailwind layers or come earlier). Bump the ?v= on that line when editing.

   The portal colours everything through HSL triplets (--primary: H S% L%),
   so the palette is mostly those variables. Where a rule keys on markup it
   names the layout it comes from (PortalLayout / AuthLayout in the portal
   image); if Breeze changes that markup the rule simply stops matching and the
   portal falls back to its own look, nothing breaks.

   The portal never switches to its .dark theme (nothing sets the class), and
   mspworx.com has no dark mode either, so there is only a light palette. */

/* --- Mulish, served from this host (the portal's CSP allows fonts from
   'self' only). The variable font mspworx.com ships; latin + latin-ext. --- */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/mw-assets/mw-mulish-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/mw-assets/mw-mulish-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Palette (mspworx.com: app/globals.css) ----------------------------- */
:root {
  --font-sans: "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --default-font-family: var(--font-sans);

  --background: 60 12% 95%;          /* #f4f4f1 */
  --foreground: 202 61% 14%;         /* #0e2a3a */
  --card: 0 0% 100%;
  --card-foreground: 202 61% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 202 61% 14%;
  --primary: 208 72% 10%;            /* navy #071a2b: buttons, as on the site */
  --primary-foreground: 0 0% 100%;
  --primary-on-tint: 210 75% 37%;    /* #185fa5: links */
  --secondary: 67 17% 90%;           /* #e8e9e0 */
  --secondary-foreground: 202 61% 14%;
  --muted: 67 17% 92%;
  --muted-foreground: 199 16% 35%;   /* #4a5d66 */
  --accent: 210 70% 96%;             /* pale MSP Worx blue: hovers */
  --accent-foreground: 202 61% 14%;
  --border: 66 12% 83%;              /* #d8d9cf */
  --input: 66 10% 78%;
  --ring: 210 71% 54%;               /* #378add */
  --radius: 1rem;                    /* cards: the site's rounded-2xl */

  /* The document accent (a bar on proposals and invoices, and the portal's
     fallback when a client has no logo) follows the brand, not a client's
     stored colour. */
  --doc-accent: #378add;
  --brand-primary: var(--primary);
  --brand-primary-foreground: var(--primary-foreground);
}

html,
body {
  font-family: var(--font-sans);
}

::selection {
  background: #378add;
  color: #fff;
}

/* Headings: Mulish bold, tight, navy, as on the site. */
.font-display {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Primary actions are the site's pill buttons: navy, MSP Worx blue on hover. */
a.bg-primary,
button.bg-primary {
  border-radius: 9999px;
}
a.bg-primary:hover,
button.bg-primary:hover:not(:disabled) {
  background-color: #185fa5;
}

/* Form fields keep a moderate radius; --radius alone would make them 14px. */
input.rounded-md,
select.rounded-md,
textarea.rounded-md {
  border-radius: 0.625rem;
}

/* Cards get the site's soft lift (form fields carry the same two classes). */
.bg-card.border:not(input, select, textarea, summary, button, a) {
  box-shadow: 0 1px 2px rgb(7 26 43 / 0.04), 0 8px 24px -12px rgb(7 26 43 / 0.12);
}

/* --- Signed-in shell (PortalLayout) --------------------------------------- */

/* The side menu is a navy panel, like the site's navy sections, and stays in
   view while the page scrolls. */
body > div.flex > aside.w-64 {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100dvh;
  border-right: 0;
  background-color: #071a2b;
  background-image:
    radial-gradient(120% 45% at 0% 0%, rgb(55 138 221 / 0.22) 0%, rgb(55 138 221 / 0) 70%),
    linear-gradient(160deg, #071a2b 0%, #123a5c 60%, #071a2b 100%);
  color: #fff;
}

/* The logo. With no client logo set the portal prints the portal's name in
   text; the MSP Worx logo is drawn in its place. The name stays in the markup
   (font-size 0) for screen readers. */
body > div.flex > aside.w-64 > div:first-child {
  height: 6rem;
}
body > div.flex > aside.w-64 > div:first-child > span.font-display {
  display: block;
  width: 200px;
  height: 56px;
  font-size: 0;
  color: transparent;
  background: url(/mw-assets/mw-logo-horizontal-reverse.svg) left center / contain no-repeat;
}

body > div.flex > aside.w-64 nav a {
  color: rgb(255 255 255 / 0.72);
}
body > div.flex > aside.w-64 nav a:hover {
  background-color: rgb(255 255 255 / 0.08);
  color: #fff;
}
body > div.flex > aside.w-64 nav a[aria-current="page"] {
  background-color: rgb(255 255 255 / 0.1);
  color: #fff;
}
body > div.flex > aside.w-64 nav a > span.bg-primary {
  background-color: #378add;
}
body > div.flex > aside.w-64 nav a:hover > span.bg-transparent {
  background-color: rgb(255 255 255 / 0.3);
}

/* "We're here to help." at the foot of the menu. */
body > div.flex > aside.w-64 .border-t {
  border-color: rgb(255 255 255 / 0.12);
}
body > div.flex > aside.w-64 .text-foreground {
  color: #fff;
}
body > div.flex > aside.w-64 .text-muted-foreground {
  color: rgb(255 255 255 / 0.62);
}
body > div.flex > aside.w-64 .text-primary-on-tint {
  color: #378add;
}
body > div.flex > aside.w-64 .text-primary-on-tint:hover {
  color: #fff;
}

/* Top bar: a hairline under it, and on small screens (no side menu) the
   colour logo in place of the portal's name. */
body > div.flex header.h-16 {
  border-bottom: 1px solid hsl(var(--border) / 0.7);
}
body > div.flex header.h-16 span.font-display {
  display: block;
  width: 150px;
  height: 42px;
  font-size: 0;
  color: transparent;
  background: url(/mw-assets/mw-logo-horizontal-color.svg) left center / contain no-repeat;
}
@media (min-width: 1024px) {
  body > div.flex header.h-16 span.font-display {
    display: none;
  }
}
body > div.flex header.h-16 summary {
  border-radius: 9999px;
}

#portal-main {
  padding-top: 1.5rem;
}

/* --- Sign-in, forgot and reset password (AuthLayout) --------------------- */
/* The site's navy hero behind a white card, the stacked logo above it. */
body:has(> main > .settle-in.max-w-md) {
  background-color: #071a2b;
  background-image:
    radial-gradient(60% 55% at 88% 100%, rgb(55 138 221 / 0.35) 0%, rgb(55 138 221 / 0) 65%),
    linear-gradient(135deg, #071a2b 0%, #123a5c 55%, #071a2b 100%);
  background-attachment: fixed;
}
body > main > .settle-in.max-w-md > .text-center > .doc-accent-bg {
  width: 170px;
  height: 145px;
  border-radius: 0;
  background: url(/mw-assets/mw-logo-stacked-reverse.svg) center / contain no-repeat;
}
body > main > .settle-in.max-w-md > .text-center > h1 {
  margin-top: 1.75rem;
  color: #fff;
}
body > main > .settle-in.max-w-md .text-muted-foreground {
  color: rgb(255 255 255 / 0.7);
}
body > main > .settle-in.max-w-md form .text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
body > main > .settle-in.max-w-md > p .text-primary-on-tint {
  color: #378add;
}
body > main > .settle-in.max-w-md form.bg-card {
  border-color: transparent;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45);
}