/* Talk Australia Asset Tracker: our look, laid over the map application.
   The map application loads this file on every page (it is its own supported hook).
   Colours and type are Talk Australia's brand kit: teal, olive, gold; Outfit and Inter.

   The sign-in rules are tied to the page's structure (a <main> holding a panel that holds
   the sign-in form), so they touch the sign-in screens and nothing inside the application.
   AFTER AN ENGINE UPGRADE: open the sign-in page once and check it still looks like this. */

@font-face { font-family: "Outfit"; src: url(/brand/fonts/outfit-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/brand/fonts/inter-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ta-teal: #23403F; --ta-teal-deep: #11262A; --ta-sea: #2F6E6B; --ta-olive: #617235;
  --ta-gold: #E3C56B; --ta-gold-pale: #F6EDD3; --ta-ink: #16232A; --ta-body: #3A4A4D;
  --ta-muted: #5C6B6C; --ta-line: #DDE5E2; --ta-wash: #F4F7F5;
  --ta-display: "Outfit", "Inter", "Segoe UI", system-ui, sans-serif;
  --ta-text: "Inter", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

/* layout the application itself relies on (this is what its own styles.css holds) */
html, body, #root, .root { height: 100%; margin: 0; padding: 0; }
.root { display: flex; flex-direction: column; }

/* ---- everywhere: our typefaces */
html body { background: var(--ta-wash); font-family: var(--ta-text); }
body [class*="Mui"] { font-family: var(--ta-text); }
body .MuiTypography-h4, body .MuiTypography-h5, body .MuiTypography-h6, body .MuiDialogTitle-root { font-family: var(--ta-display); letter-spacing: 0; }
.loader { border-color: var(--ta-line) !important; border-right-color: var(--ta-teal) !important; }

/* ================================================================== sign-in screens */
main:has(> .MuiPaper-root > form[class*="-form"]) {
  position: relative; display: flex; flex: none; height: auto; min-height: 100%; overflow: hidden;
  background: radial-gradient(110% 90% at 50% 18%, #2D4F4D 0%, var(--ta-teal) 36%, var(--ta-teal-deep) 100%);
}
/* phones and tablets: the brand panel is folded away, the logo sits above the card */
main:has(> .MuiPaper-root > form[class*="-form"]) > [class*="-sidebar"] { display: none; }
main:has(> .MuiPaper-root > form[class*="-form"]) > .MuiPaper-root {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: transparent; box-shadow: none; border-radius: 0; padding: 76px 18px 84px;
}
main:has(> .MuiPaper-root > form[class*="-form"]) form[class*="-form"] {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 430px; padding: 0;
}
/* the logo, drawn from our own file at a size we choose */
main:has(> .MuiPaper-root > form[class*="-form"]) form[class*="-form"]::before {
  content: ""; position: relative; z-index: 1; width: 208px; height: 240px; margin: 0 auto 30px;
  background: url(/brand/lockup-dark.png) center / contain no-repeat;
}
/* the signal rings from the logo, carried on across the page behind it */
main:has(> .MuiPaper-root > form[class*="-form"]) form[class*="-form"]::after {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 75px; width: 1150px; height: 1150px;
  transform: translate(-50%, -50%); pointer-events: none;
  background: url(/brand/rings.svg) center / contain no-repeat;
}
/* the card */
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] {
  position: relative; z-index: 1; gap: 16px; background: #fff; border-radius: 26px; padding: 32px 26px 22px;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .18);
}
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] > img,
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-sidebar"] > img { display: none; }
main:has(> .MuiPaper-root > form[class*="-form"]) form:has(> [class*="-options"]) > [class*="-container"]::before {
  content: "Sign in"; font: 400 30px/1.1 var(--ta-display); letter-spacing: -.01em; color: var(--ta-teal-deep); margin-bottom: 4px;
}
main:has(> .MuiPaper-root > form[class*="-form"]) form:has(> [class*="-options"]) > [class*="-container"]::after {
  content: "Hosted in Australia  \00B7  Encrypted connection"; text-align: center; font: 400 12.5px/1.4 var(--ta-text); color: var(--ta-muted);
}
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-extraContainer"]:empty { display: none; }

/* fields */
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiOutlinedInput-root { border-radius: 13px; background: #fff; }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiOutlinedInput-input { padding: 14px 16px; font-size: 16px; color: var(--ta-ink); }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiInputLabel-root { color: var(--ta-muted); font-size: 15.5px; }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiInputLabel-root:not(.MuiInputLabel-shrink) { transform: translate(16px, 14px) scale(1); }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiInputLabel-root.Mui-focused { color: var(--ta-sea); }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiOutlinedInput-notchedOutline { border-color: #CBD7D3; border-width: 1.5px; }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: #9FB3AE; }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--ta-sea); border-width: 2px; }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #fff inset; -webkit-text-fill-color: var(--ta-ink); caret-color: var(--ta-ink); border-radius: 13px;
}
/* the button */
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiButton-root {
  height: 52px; border-radius: 999px; box-shadow: none; margin-top: 4px;
  font: 600 14px/1 var(--ta-display); letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .15s ease, box-shadow .15s ease;
}
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiButton-contained { background: var(--ta-teal); color: #fff; }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiButton-contained:hover { background: var(--ta-sea); box-shadow: 0 14px 26px -14px rgba(35, 64, 63, .9); }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiButton-contained.Mui-disabled { background: #E6ECE9; color: #8A9997; }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] .MuiButton-root:focus-visible { outline: 3px solid var(--ta-gold); outline-offset: 3px; }

/* language picker, top right. The button beside it opens a set-up code for a phone app
   that is not ours, so it is put away until our own app exists. */
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-options"] { z-index: 3; }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-options"] > .MuiIconButton-root { display: none; }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-options"] .MuiInputBase-root { color: #fff; background: rgba(255, 255, 255, .07); font-size: 13.5px; border-radius: 999px; }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-options"] .MuiOutlinedInput-notchedOutline { border-color: rgba(255, 255, 255, .3); }
main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-options"] .MuiSvgIcon-root { color: rgba(255, 255, 255, .8); }

/* the links and social icons under the form (they live in our start page, outside the application) */
.ta-links, .ta-social { display: none; }
body:has(main > .MuiPaper-root > form[class*="-form"]) .ta-links {
  position: fixed; z-index: 2; left: 0; right: 0; bottom: 66px; padding: 0 16px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font: 500 14px/1.3 var(--ta-text);
}
.ta-links span { color: rgba(255, 255, 255, .62); }
.ta-links a { color: rgba(255, 255, 255, .92); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(227, 197, 107, .65); }
@media (max-width: 1199.95px) { .ta-links > a { display: none; } }
.ta-links a:hover { color: var(--ta-gold); }
body:has(main > .MuiPaper-root > form[class*="-form"]) .ta-social {
  position: fixed; z-index: 2; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 12px;
}
.ta-social a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: rgba(255, 255, 255, .88); border: 1px solid rgba(255, 255, 255, .28); transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.ta-social a:hover { color: var(--ta-gold); border-color: var(--ta-gold); }
.ta-social a:focus-visible { outline: 3px solid var(--ta-gold); outline-offset: 2px; }
@media (max-width: 1199.95px) {
  main:has(> .MuiPaper-root > form[class*="-form"]) > .MuiPaper-root { padding-bottom: 132px; }
}
@media (max-width: 1199.95px) and (max-height: 790px) {
  body:has(main > .MuiPaper-root > form[class*="-form"]) .ta-links,
  body:has(main > .MuiPaper-root > form[class*="-form"]) .ta-social { display: none; }
  main:has(> .MuiPaper-root > form[class*="-form"]) > .MuiPaper-root { padding-bottom: 60px; }
}

/* ---- wide screens: brand panel on the left, the sign-in sheet on the right */
@media (min-width: 1200px) {
  main:has(> .MuiPaper-root > form[class*="-form"]) { min-height: max(100%, 640px); background: radial-gradient(70% 80% at 23% 36%, #2D4F4D 0%, var(--ta-teal) 40%, var(--ta-teal-deep) 100%); }
  main:has(> .MuiPaper-root > form[class*="-form"]) > [class*="-sidebar"] {
    display: block; position: relative; flex: none; width: 46%; padding: 0;
    background: url(/brand/rings.svg) center calc(50% - 126px) / 1560px 1560px no-repeat;
  }
  main:has(> .MuiPaper-root > form[class*="-form"]) > [class*="-sidebar"]::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 340px; height: 392px; transform: translate(-50%, -63.5%);
    background: url(/brand/lockup-dark.png) center / contain no-repeat;
  }
  main:has(> .MuiPaper-root > form[class*="-form"]) > [class*="-sidebar"]::after {
    content: "Every asset,\A accounted for."; white-space: pre-line; position: absolute; left: 0; right: 0; top: calc(50% + 186px);
    text-align: center; font: 300 31px/1.24 var(--ta-display); letter-spacing: -.012em; color: #fff;
  }
  main:has(> .MuiPaper-root > form[class*="-form"])::after {
    content: "A service of IT&T Communications Pty Ltd, trading as Talk Australia"; position: absolute; left: 0; bottom: 24px; width: 46%;
    text-align: center; font: 400 12.5px/1.4 var(--ta-text); letter-spacing: .02em; color: rgba(255, 255, 255, .5);
  }
  main:has(> .MuiPaper-root > form[class*="-form"]) > .MuiPaper-root {
    background: var(--ta-wash); border-radius: 46px 0 0 46px; padding: 40px 24px 70px; box-shadow: -40px 0 90px -40px rgba(0, 0, 0, .6);
  }
  main:has(> .MuiPaper-root > form[class*="-form"]) form[class*="-form"]::before,
  main:has(> .MuiPaper-root > form[class*="-form"]) form[class*="-form"]::after { display: none; }
  main:has(> .MuiPaper-root > form[class*="-form"]) form[class*="-form"] { max-width: 440px; }
  main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-container"] {
    padding: 42px 38px 28px; border: 1px solid var(--ta-line); box-shadow: 0 40px 80px -48px rgba(17, 38, 42, .5);
  }
  main:has(> .MuiPaper-root > form[class*="-form"]) form:has(> [class*="-options"]) > [class*="-container"]::before { font-size: 36px; margin-bottom: 8px; }
  main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-options"] .MuiInputBase-root { color: var(--ta-ink); background: #fff; }
  main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-options"] .MuiOutlinedInput-notchedOutline { border-color: var(--ta-line); }
  main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-options"] .MuiSvgIcon-root { color: var(--ta-muted); }
  body:has(main > .MuiPaper-root > form[class*="-form"]) .ta-links { left: 46%; bottom: 76px; }
  body:has(main > .MuiPaper-root > form[class*="-form"]) .ta-social { left: 46%; bottom: 24px; }
  .ta-social a { color: var(--ta-teal); background: #fff; border-color: var(--ta-line); }
  .ta-social a:hover { color: #fff; background: var(--ta-teal); border-color: var(--ta-teal); }
  main:has(> .MuiPaper-root > form[class*="-form"]) > .MuiPaper-root { padding-bottom: 120px; }
  .ta-links span { color: var(--ta-muted); }
  .ta-links a { color: var(--ta-sea); border-bottom-color: rgba(47, 110, 107, .35); }
  .ta-links a:hover { color: var(--ta-teal-deep); }
}