/* The menu, as the support desk's is.
 *
 * The desk's menu (Chatwoot v4): 32px rows with an 8px corner, a 16px outline
 * icon (Lucide) and 14px text in the quieter ink; the row you are on has a
 * faint neutral ground and the full ink, not a colour; a group opens under a
 * chevron at the row's far end, its items indented beside a hairline; and the
 * person signed in is at the foot.
 *
 * GoAlert's menu is restyled to that, visual only: the same items, links and
 * behaviour. Three things here lean on brand.js:
 *   - data-fr-nav on the html element: brand.js is running, so the row you
 *     are on is marked by it. Without it GoAlert's own highlight stays.
 *   - data-fr-active on the link of the page you are on.
 *   - data-fr-open on a group's link when you are on one of its pages.
 *
 * Icons are matched by the name GoAlert gives each of its own
 * (data-testid): one it adds later keeps GoAlert's drawing until it is given
 * one here. The icon files are Lucide's (icons/LICENSE).
 */

/* ── The frame ────────────────────────────────────────────────────────── */
#app-root .MuiDrawer-paper {
  --fr-row: rgba(147, 153, 176, 0.14); /* the desk's selected ground */
  --fr-row-hover: rgba(147, 153, 176, 0.08);
}

/* The mark and the name: one short row, no rule under it. */
#app-root .MuiDrawer-paper > div:first-child {
  min-height: 52px;
  height: 52px;
  align-items: center;
  padding: 0 6px;
}

#app-root .MuiDrawer-paper > div:first-child > a {
  display: flex;
  align-items: center;
}

#app-root .MuiDrawer-paper img[alt="GoAlert"] {
  margin: 0 8px 0 10px !important;
}

#app-root .MuiDrawer-paper > hr.MuiDivider-root {
  display: none;
}

#app-root .MuiDrawer-paper nav > .MuiList-root {
  padding: 4px 8px 8px !important;
}

/* ── Rows ─────────────────────────────────────────────────────────────── */
#app-root .MuiDrawer-paper nav a {
  display: block;
  margin: 0 0 2px;
  border-radius: 8px;
  color: var(--fr-ink-2) !important;
  text-decoration: none !important;
}

#app-root .MuiDrawer-paper nav .MuiListItemButton-root {
  min-height: 32px;
  height: 32px;
  margin: 0 !important;
  padding: 4px 8px !important;
  gap: 8px;
  border-radius: 8px;
  color: inherit !important;
}

#app-root .MuiDrawer-paper nav .MuiListItemButton-root:hover {
  background: var(--fr-row-hover) !important;
}

#app-root .MuiDrawer-paper nav .MuiListItemIcon-root {
  min-width: 16px !important;
  width: 16px;
  color: inherit !important;
}

#app-root .MuiDrawer-paper nav .MuiListItemText-root {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

#app-root .MuiDrawer-paper nav .MuiListItemText-root .MuiTypography-root {
  overflow: hidden;
  color: inherit !important;
  font-weight: 400 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The row you are on: a faint ground and the full ink, as the desk's. */
:root[data-fr-nav] #app-root .MuiDrawer-paper nav a {
  background: transparent !important;
}

:root[data-fr-nav] #app-root .MuiDrawer-paper nav a[data-fr-active] {
  background: var(--fr-row) !important;
  color: var(--fr-ink) !important;
}

:root[data-fr-nav] #app-root .MuiDrawer-paper nav a[data-fr-open] {
  color: var(--fr-ink) !important;
}

:root[data-fr-nav] #app-root .MuiDrawer-paper nav a[data-fr-open] .MuiListItemText-root .MuiTypography-root {
  font-weight: 500 !important;
}

/* ── Icons: the desk's outline set ────────────────────────────────────── */
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="NotificationsIcon"]),
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="RotateRightIcon"]),
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="TodayIcon"]),
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="LayersIcon"]),
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="VpnKeyIcon"]),
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="GroupIcon"]),
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="BuildIcon"]) {
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--fr-icon) center / 16px 16px no-repeat;
  mask: var(--fr-icon) center / 16px 16px no-repeat;
}

#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="NotificationsIcon"]) > svg,
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="RotateRightIcon"]) > svg,
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="TodayIcon"]) > svg,
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="LayersIcon"]) > svg,
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="VpnKeyIcon"]) > svg,
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="GroupIcon"]) > svg,
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="BuildIcon"]) > svg {
  display: none;
}

#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="NotificationsIcon"]) {
  --fr-icon: url("icons/bell.svg");
}

#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="RotateRightIcon"]) {
  --fr-icon: url("icons/refresh-cw.svg");
}

#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="TodayIcon"]) {
  --fr-icon: url("icons/calendar-days.svg");
}

#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="LayersIcon"]) {
  --fr-icon: url("icons/layers.svg");
}

#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="VpnKeyIcon"]) {
  --fr-icon: url("icons/server.svg");
}

#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="GroupIcon"]) {
  --fr-icon: url("icons/users.svg");
}

#app-root .MuiDrawer-paper nav .MuiListItemIcon-root:has(> svg[data-testid="BuildIcon"]) {
  --fr-icon: url("icons/settings.svg");
}

/* An icon with no match above (the Wizard's, or one GoAlert adds): its own
 * drawing, at the desk's size. */
#app-root .MuiDrawer-paper nav .MuiListItemIcon-root > svg {
  font-size: 16px !important;
}

/* ── A group: the chevron at the far end, its items beside a hairline ─── */
#app-root .MuiDrawer-paper nav svg[data-testid="ExpandMoreIcon"],
#app-root .MuiDrawer-paper nav svg[data-testid="ChevronRightIcon"] {
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
  font-size: 14px !important;
  background: currentColor;
  opacity: 0.7;
  -webkit-mask: url("icons/chevron-down.svg") center / 14px 14px no-repeat;
  mask: url("icons/chevron-down.svg") center / 14px 14px no-repeat;
}

/* Open (its list is showing): the desk's chevron points up. GoAlert draws
 * one chevron and turns it; which way is told from the list after the row. */
#app-root .MuiDrawer-paper nav a:has(+ .MuiCollapse-entered) svg[data-testid="ExpandMoreIcon"],
#app-root .MuiDrawer-paper nav a:has(+ .MuiCollapse-root:not(.MuiCollapse-hidden)) svg[data-testid="ExpandMoreIcon"] {
  -webkit-mask-image: url("icons/chevron-up.svg");
  mask-image: url("icons/chevron-up.svg");
}

#app-root .MuiDrawer-paper nav svg[data-testid="ExpandMoreIcon"] > path,
#app-root .MuiDrawer-paper nav svg[data-testid="ChevronRightIcon"] > path {
  display: none;
}

#app-root .MuiDrawer-paper nav .MuiCollapse-root .MuiList-root {
  margin: 2px 0 6px 15px !important;
  padding: 0 0 0 9px !important;
  border-left: 1px solid var(--fr-rule);
}

/* ── Wide screens: the desk's width, and the person at the foot ───────── */
/* GoAlert pins its menu at 190px and its bar and page beside it; all three
 * move together. Only where GoAlert shows the menu docked. */
@media (min-width: 1200px) {
  #app-root .MuiDrawer-docked .MuiDrawer-paper {
    width: 240px !important;
    z-index: 1000;
  }

  #app-root > main {
    margin-left: 240px !important;
  }

  #app-root > header.MuiAppBar-root {
    left: 240px !important;
    width: calc(100% - 240px) !important;
  }

  /* The profile button, from the bar's far end to the menu's foot. It opens
   * the same panel. */
  #app-root .MuiDrawer-docked .MuiDrawer-paper::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 56px;
    left: 0;
    border-top: 1px solid var(--fr-rule);
  }

  #app-root > header.MuiAppBar-root button[aria-label="Manage Profile"] {
    position: fixed;
    bottom: 8px;
    left: 8px;
    width: 224px;
    height: 40px;
    padding: 4px 8px !important;
    justify-content: flex-start;
    gap: 10px;
    border-radius: 8px !important;
    color: var(--fr-ink) !important;
  }

  #app-root > header.MuiAppBar-root button[aria-label="Manage Profile"]:hover {
    background: rgba(147, 153, 176, 0.08) !important;
  }

  #app-root > header.MuiAppBar-root button[aria-label="Manage Profile"] .MuiAvatar-root {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  #app-root > header.MuiAppBar-root button[aria-label="Manage Profile"]::after {
    content: "My profile";
    font: 500 14px/20px "Inter", ui-sans-serif, system-ui, sans-serif;
  }
}

/* Closed, GoAlert turns its chevron on its side: the desk's points down. */
#app-root .MuiDrawer-paper nav svg[data-testid="ExpandMoreIcon"],
#app-root .MuiDrawer-paper nav svg[data-testid="ChevronRightIcon"] {
  transform: none !important;
}

/* ── The profile panel: the desk's menu over the person's button ──────── */
/* The desk's is a short list in a rounded, ruled panel: quiet rows with an
 * icon, a rule above the last, and signing out at the foot. GoAlert's panel
 * (a greeting, a button, the appearance choice and Logout) is drawn as that.
 * The same controls, doing the same things. */
.MuiPopover-root[data-cy="manage-profile"] .MuiPopover-paper {
  box-sizing: border-box;
  width: 240px;
  min-width: 0;
  padding: 6px !important;
  border: 1px solid var(--fr-rule);
  border-radius: 12px !important;
  background-color: var(--fr-panel) !important;
  box-shadow:
    0 4px 10px rgba(10, 14, 22, 0.08),
    0 16px 40px rgba(10, 14, 22, 0.16) !important;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiGrid-container {
  width: 100% !important;
  margin: 0 !important;
  flex-wrap: nowrap;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiGrid-item {
  max-width: 100%;
  padding: 0 !important;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiGrid-item:empty {
  display: none;
}

/* The greeting: a quiet heading for the list. */
.MuiPopover-root[data-cy="manage-profile"] .MuiTypography-h5 {
  display: block;
  padding: 6px 8px 4px;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  color: var(--fr-ink-2) !important;
}

/* Rows: Manage Profile and Logout. */
.MuiPopover-root[data-cy="manage-profile"] a {
  display: block;
  text-decoration: none !important;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiButton-root {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  min-width: 0;
  padding: 4px 8px !important;
  justify-content: flex-start;
  gap: 8px;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--fr-ink) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiButton-root:hover,
.MuiPopover-root[data-cy="manage-profile"] .MuiButton-root:focus-visible {
  background: rgba(147, 153, 176, 0.12) !important;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiButton-outlined::before,
.MuiPopover-root[data-cy="manage-profile"] .MuiButton-text::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--fr-icon) center / 16px 16px no-repeat;
  mask: var(--fr-icon) center / 16px 16px no-repeat;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiButton-outlined {
  --fr-icon: url("icons/user-pen.svg");
}

.MuiPopover-root[data-cy="manage-profile"] .MuiButton-text {
  --fr-icon: url("icons/log-out.svg");
}

/* GoAlert's own drawing for Logout gives way to the desk's. */
.MuiPopover-root[data-cy="manage-profile"] .MuiButton-text .MuiButton-icon {
  display: none;
}

/* Appearance: a small label and the choice, within the list. */
.MuiPopover-root[data-cy="manage-profile"] .MuiFormLabel-root {
  display: block;
  padding: 8px 8px 4px;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  color: var(--fr-ink-2) !important;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiToggleButtonGroup-root {
  display: flex;
  margin: 0 8px 8px;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiToggleButton-root {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 4px 5px !important;
  gap: 3px;
  border-color: var(--fr-rule) !important;
  color: var(--fr-ink-2) !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiToggleButton-root.Mui-selected {
  background: rgba(147, 153, 176, 0.16) !important;
  color: var(--fr-ink) !important;
}

.MuiPopover-root[data-cy="manage-profile"] .MuiToggleButton-root .MuiSvgIcon-root {
  margin: 0 !important;
  font-size: 15px !important;
}

/* The last of the choice opens the colour picker: an arrow, no wider. */
.MuiPopover-root[data-cy="manage-profile"] .MuiToggleButton-root:last-child {
  flex: 0 0 26px;
  padding: 4px 0 !important;
}

/* A rule above signing out, as the desk's. */
.MuiPopover-root[data-cy="manage-profile"] .MuiPopover-paper > .MuiGrid-container > .MuiGrid-item:last-child {
  margin-top: 2px;
  padding-top: 6px !important;
  border-top: 1px solid var(--fr-rule);
}

/* On wide screens it opens over the button at the menu's foot. */
@media (min-width: 1200px) {
  .MuiPopover-root[data-cy="manage-profile"] .MuiPopover-paper {
    top: auto !important;
    bottom: 56px !important;
    left: 8px !important;
    transform-origin: bottom left !important;
  }
}