/* Example Fleet Tracking: 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 Example Fleet'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: #1F3A5F; --ta-teal-deep: #132238; --ta-sea: #506582; --ta-olive: #695F52;
  --ta-gold: #F2A33A; --ta-gold-pale: #FCEBD4; --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%, #3E5675 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%, #3E5675 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;
    /* the kinds of asset that get tracked: our own pictures, tinted to the brand teal */
    background: url(/brand/rings.svg) calc(100% + 420px) -380px / 1300px 1300px no-repeat;
  }
  main:has(> .MuiPaper-root > form[class*="-form"]) > [class*="-sidebar"]::before {
    content: ""; position: absolute; left: 44px; top: 38px; width: 330px; height: 91px;
    background: url(/brand/lockup-dark-h.png) left center / contain no-repeat;
  }
  main:has(> .MuiPaper-root > form[class*="-form"]) > [class*="-sidebar"]::after {
    content: ""; white-space: pre-line; position: absolute; left: 44px; right: 44px; bottom: 78px;
    text-align: left; font: 300 46px/1.1 var(--ta-display); letter-spacing: -.02em; color: #fff;
  }
  main:has(> .MuiPaper-root > form[class*="-form"])::after {
    content: "Example Fleet Co Pty Ltd"; position: absolute; left: 44px; bottom: 30px; width: calc(46% - 88px);
    text-align: left; font: 400 12.5px/1.4 var(--ta-text); letter-spacing: .02em; color: rgba(255, 255, 255, .62);
  }
  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); }
}

/* ================================================================== inside the application
   Our own layout laid over the map application's screens: one docked panel with our logo
   on a deep teal band, asset rows as cards, a dark navigation bar with a gold marker, and a
   dark side rail on the settings and history screens. Tied to the screens' structure, so
   AFTER AN ENGINE UPGRADE open the map, one settings page and one history page and check them. */

/* ---- the panel on the map screen */
div[class*="-sidebar"]:has(> [class*="-header"]) > .MuiPaper-root[class*="-header"] {
  position: relative; border-radius: 0; box-shadow: none; color: #fff;
  background: linear-gradient(155deg, #3E5675 0%, var(--ta-teal) 42%, var(--ta-teal-deep) 100%);
}
div[class*="-sidebar"] > [class*="-header"] .MuiToolbar-root { min-height: 60px; padding: 0 10px; gap: 4px; }
div[class*="-sidebar"] > [class*="-header"] .MuiIconButton-root { color: rgba(255, 255, 255, .88); }
div[class*="-sidebar"] > [class*="-header"] .MuiIconButton-root.Mui-disabled { color: rgba(255, 255, 255, .28); }
div[class*="-sidebar"] > [class*="-header"] .MuiOutlinedInput-root {
  height: 42px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 15px; padding-left: 6px;
}
div[class*="-sidebar"] > [class*="-header"] .MuiOutlinedInput-notchedOutline { border-color: rgba(255, 255, 255, .22) !important; border-width: 1px !important; }
div[class*="-sidebar"] > [class*="-header"] .MuiOutlinedInput-root.Mui-focused { background: rgba(255, 255, 255, .2); }
div[class*="-sidebar"] > [class*="-header"] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--ta-gold) !important; }
div[class*="-sidebar"] > [class*="-header"] input::placeholder { color: rgba(255, 255, 255, .78); opacity: 1; }
div[class*="-sidebar"] > [class*="-header"] .MuiBadge-badge { background: var(--ta-gold); color: var(--ta-teal-deep); }

div[class*="-sidebar"] > [class*="-middle"] > .MuiPaper-root[class*="-contentList"] { background: var(--ta-wash); border-radius: 0; box-shadow: none; }
[class*="-contentList"] .MuiListItemButton-root {
  margin: 5px 12px; width: calc(100% - 24px); height: calc(100% - 10px); padding: 6px 10px 6px 12px;
  background: #fff; border: 1px solid var(--ta-line); border-radius: 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
[class*="-contentList"] .MuiListItemButton-root:hover { background: #fff; border-color: #9FB3AE; box-shadow: 0 10px 20px -16px rgba(17, 38, 42, .7); }
[class*="-contentList"] .MuiListItemButton-root.Mui-selected,
[class*="-contentList"] .MuiListItemButton-root.Mui-selected:hover {
  background: var(--ta-gold-pale); border-color: var(--ta-gold); box-shadow: inset 4px 0 0 var(--ta-gold);
}
[class*="-contentList"] .MuiListItemAvatar-root { min-width: 54px; }
[class*="-contentList"] .MuiAvatar-root { width: 42px; height: 42px; border-radius: 13px; background: var(--ta-teal); }
[class*="-contentList"] .MuiListItemText-primary { font: 600 14.5px/1.3 var(--ta-text); color: var(--ta-ink); }
[class*="-contentList"] .MuiListItemText-secondary { font-size: 12.5px; }
[class*="-contentList"] .MuiListItemText-secondary > span::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: currentColor;
}
[class*="-contentList"] [class*="-success"], [class*="-card"] [class*="-success"] { color: var(--ta-olive); }
[class*="-contentList"] [class*="-error"], [class*="-card"] [class*="-error"] { color: #A4452C; }
[class*="-contentList"] [class*="-neutral"] { color: #8A9997; }
[class*="-contentList"] ::-webkit-scrollbar { width: 8px; }
[class*="-contentList"] ::-webkit-scrollbar-thumb { background: #C9D5D1; border-radius: 8px; border: 2px solid var(--ta-wash); }

/* ---- the navigation bar: dark, with a gold marker on the screen you are on */
.MuiPaper-root:has(> .MuiBottomNavigation-root) { background: var(--ta-teal-deep); border-radius: 0; box-shadow: none; }
body .MuiBottomNavigation-root { background: transparent; height: 62px; }
.MuiBottomNavigation-root .MuiBottomNavigationAction-root { position: relative; min-width: 0; padding: 8px 4px 6px; color: rgba(255, 255, 255, .62); }
.MuiBottomNavigation-root .MuiBottomNavigationAction-root.Mui-selected { color: var(--ta-gold); }
.MuiBottomNavigation-root .MuiBottomNavigationAction-root.Mui-selected::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 34px; height: 3px; margin-left: -17px; border-radius: 0 0 4px 4px; background: var(--ta-gold);
}
.MuiBottomNavigation-root .MuiBottomNavigationAction-label,
.MuiBottomNavigation-root .MuiBottomNavigationAction-label.Mui-selected {
  font: 600 10.5px/1.5 var(--ta-display); letter-spacing: .14em; text-transform: uppercase; margin-top: 3px;
}
.MuiBottomNavigation-root .MuiBadge-badge { background: var(--ta-gold); color: var(--ta-teal-deep); }

/* ---- the card that opens when you pick an asset */
.MuiCard-root[class*="-card"] { border-radius: 20px; border: 1px solid var(--ta-line); box-shadow: 0 34px 60px -30px rgba(17, 38, 42, .6); overflow: hidden; }
.MuiCard-root[class*="-card"] .draggable-header:not([style*="background-image"]) { background: var(--ta-teal-deep); }
.MuiCard-root[class*="-card"] .draggable-header > [class*="-header"] { padding: 12px 8px 12px 18px; }
.MuiCard-root[class*="-card"] .draggable-header .MuiTypography-root { font: 500 16.5px/1.25 var(--ta-display); color: #fff; }
.MuiCard-root[class*="-card"] .draggable-header .MuiIconButton-root { color: rgba(255, 255, 255, .85); }
.MuiCard-root[class*="-card"] .MuiCardContent-root { padding: 6px 18px 4px; }
.MuiCard-root[class*="-card"] .MuiTableCell-root { padding: 8px 0; border-bottom: 1px solid #EDF1EF; }
.MuiCard-root[class*="-card"] .MuiTableRow-root:last-child .MuiTableCell-root { border-bottom: 0; }
.MuiCard-root[class*="-card"] tbody .MuiTableCell-root:first-child .MuiTypography-root {
  font: 600 11px/1.4 var(--ta-text); letter-spacing: .09em; text-transform: uppercase; color: var(--ta-muted);
}
.MuiCard-root[class*="-card"] tbody .MuiTableCell-root:last-child .MuiTypography-root { font-weight: 600; color: var(--ta-ink); }
.MuiCard-root[class*="-card"] tfoot .MuiTableCell-root a { color: var(--ta-sea); font-weight: 600; text-decoration-color: rgba(47, 110, 107, .4); }
.MuiCard-root[class*="-card"] .MuiCardActions-root { background: var(--ta-wash); border-top: 1px solid var(--ta-line); padding: 6px 12px; }
.MuiCard-root[class*="-card"] .MuiCardActions-root .MuiIconButton-root:not(.Mui-disabled) { color: var(--ta-teal); }

/* ---- the map's own buttons */
.maplibregl-ctrl-top-right .maplibregl-ctrl-group, .maplibregl-ctrl-top-left .maplibregl-ctrl-group {
  border-radius: 14px; overflow: hidden; box-shadow: 0 10px 22px -12px rgba(17, 38, 42, .65) !important; border: 1px solid var(--ta-line);
}
.maplibregl-ctrl-group button { width: 38px; height: 38px; }
.maplibregl-ctrl-group button + button { border-top-color: #EDF1EF; }
.maplibregl-ctrl-group button .MuiSvgIcon-root { color: var(--ta-teal); }
.maplibregl-ctrl-scale { border-color: var(--ta-teal); color: var(--ta-teal); background: rgba(255, 255, 255, .8); font-family: var(--ta-text); }

/* ---- settings and history: a dark side rail */
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root { position: relative; background: var(--ta-teal-deep); color: #fff; border-right: 0; }
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root > .MuiToolbar-root .MuiTypography-root { font: 500 20px/1.2 var(--ta-display); color: #fff; }
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root .MuiIconButton-root { color: rgba(255, 255, 255, .85); }
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root .MuiDivider-root { border-color: rgba(255, 255, 255, .12); }
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root .MuiList-root { padding: 8px 0; }
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root .MuiListItemButton-root {
  margin: 2px 8px; padding: 7px 12px; border-radius: 12px; color: rgba(255, 255, 255, .8); transition: background-color .15s ease;
}
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root .MuiListItemButton-root:hover { background: rgba(255, 255, 255, .08); }
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root .MuiListItemIcon-root { min-width: 38px; color: rgba(255, 255, 255, .62); }
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root .MuiListItemText-primary { font: 500 14.5px/1.35 var(--ta-text); }
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root .MuiListItemButton-root.Mui-selected,
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root .MuiListItemButton-root.Mui-selected:hover {
  background: rgba(227, 197, 107, .16); color: #fff; box-shadow: inset 3px 0 0 var(--ta-gold);
}
.MuiDrawer-root[class*="Drawer"] > .MuiPaper-root .Mui-selected .MuiListItemIcon-root { color: var(--ta-gold); }
body .MuiAppBar-root { background: var(--ta-teal-deep); color: #fff; box-shadow: none; }
.MuiAppBar-root .MuiIconButton-root, .MuiAppBar-root .MuiTypography-root { color: #fff; }
.MuiAppBar-root .MuiTypography-h6 { font: 500 19px/1.2 var(--ta-display); }

/* ---- lists, tables and forms on those screens */
div[class*="-content"] > .MuiTable-root, div[class*="-content"] .MuiTableContainer-root > .MuiTable-root { background: #fff; }
.MuiTableHead-root .MuiTableCell-root {
  font: 600 11px/1.4 var(--ta-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ta-muted);
  background: #FAFBFA; border-bottom: 1px solid var(--ta-line);
}
.MuiTableBody-root .MuiTableCell-root { border-bottom-color: #EDF1EF; color: var(--ta-ink); }
.MuiTableBody-root .MuiTableRow-root:hover > .MuiTableCell-root { background: var(--ta-wash); }
div[class*="-content"] > [class*="-header"] .MuiOutlinedInput-root { border-radius: 999px; background: #fff; }
body .MuiFab-root { background: var(--ta-gold); color: var(--ta-teal-deep); box-shadow: 0 16px 28px -14px rgba(17, 38, 42, .7); }
body .MuiFab-root:hover { background: #EBD184; }
body .MuiButton-root { border-radius: 999px; font-family: var(--ta-display); font-weight: 600; letter-spacing: .1em; box-shadow: none; }
body .MuiButton-contained:hover { box-shadow: 0 12px 22px -14px rgba(17, 38, 42, .8); }
body .MuiAccordion-root { border: 1px solid var(--ta-line); border-radius: 16px !important; box-shadow: none; margin: 0 0 12px !important; overflow: hidden; }
body .MuiAccordion-root::before { display: none; }
body .MuiAccordionSummary-root .MuiTypography-root { font: 500 16.5px/1.3 var(--ta-display); color: var(--ta-teal-deep); }
body .MuiAccordionSummary-root.Mui-expanded { border-bottom: 1px solid #EDF1EF; }
body .MuiOutlinedInput-root { border-radius: 12px; }
body .MuiMenu-paper, body .MuiPopover-paper, body .MuiAutocomplete-paper { border-radius: 14px; border: 1px solid var(--ta-line); box-shadow: 0 24px 50px -24px rgba(17, 38, 42, .55); }
body .MuiDialog-paper { border-radius: 22px; }
body .MuiSnackbarContent-root { border-radius: 14px; background: var(--ta-teal-deep); font-family: var(--ta-text); }
body .MuiLinearProgress-bar { background-color: var(--ta-gold); }

/* ---- wide screens: the panel is docked to the edge and carries our logo */
@media (min-width: 900px) {
  div[class*="-sidebar"]:has(> [class*="-header"]) {
    margin: 0; height: 100%; width: 384px; background: var(--ta-wash); box-shadow: 22px 0 60px -34px rgba(17, 38, 42, .7);
  }
  div[class*="-sidebar"]:has(> [class*="-header"]) > .MuiPaper-root[class*="-header"] { padding: 78px 4px 10px; }
  div[class*="-sidebar"]:has(> [class*="-header"]) > .MuiPaper-root[class*="-header"]::before {
    content: ""; position: absolute; left: 20px; top: 18px; width: 214px; height: 59px;
    background: url(/brand/lockup-dark-h.png) left center / contain no-repeat;
  }
  div[class*="-sidebar"]:has(> [class*="-header"]) > .MuiPaper-root[class*="-header"]::after {
    content: ""; position: absolute; right: -150px; top: -190px; width: 420px; height: 420px; pointer-events: none; opacity: .55;
    background: url(/brand/rings.svg) center / contain no-repeat;
  }
  div[class*="-sidebar"] > [class*="-header"] { overflow: hidden; }
  div[class*="-sidebar"] > [class*="-middle"] { padding: 6px 0 0; background: var(--ta-wash); pointer-events: auto; }
  .MuiDrawer-root[class*="desktopDrawer"] > .MuiPaper-root { padding-top: 62px; }
  .MuiDrawer-root[class*="desktopDrawer"] > .MuiPaper-root::before {
    content: ""; position: absolute; left: 10px; top: 14px; width: 42px; height: 42px; background: url(/brand/mark.png) center / contain no-repeat;
  }
}

/* ---- this partner's own sign-in arrangement */
@media (min-width: 1200px) {
  main:has(> .MuiPaper-root > form[class*="-form"]) { flex-direction: row-reverse; }
  main:has(> .MuiPaper-root > form[class*="-form"]) > .MuiPaper-root { border-radius: 0 46px 46px 0; box-shadow: 40px 0 90px -40px rgba(0, 0, 0, .6); }
  main:has(> .MuiPaper-root > form[class*="-form"]) > [class*="-sidebar"] { background-position: center; background-size: 1500px 1500px; }
  main:has(> .MuiPaper-root > form[class*="-form"]) > [class*="-sidebar"]::before {
    left: 50%; top: 50%; width: 460px; height: 126px; transform: translate(-50%, -50%); background-position: center;
  }
  main:has(> .MuiPaper-root > form[class*="-form"])::after { left: auto; right: 44px; text-align: right; }
  body:has(main > .MuiPaper-root > form[class*="-form"]) .ta-links { left: 0; right: 46%; }
  main:has(> .MuiPaper-root > form[class*="-form"]) [class*="-options"] .MuiInputBase-root { color: #fff; background: rgba(255, 255, 255, .08); }
  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); }
}