/* Forward Rise branding for GoAlert, signed in.
 *
 * The desk's look on GoAlert's own screens: the page and panel colours, the
 * type, a plain top bar, rounded panels and the orange action colour. Visual
 * only: nothing here changes what a screen holds or does. The sign-in page
 * has its own file (oncall.css).
 *
 * Colour comes from two places. GoAlert builds its theme from one source
 * colour a person may choose (Profile, Appearance); brand.js makes Forward
 * Rise orange the default, which colours selections, links, tabs and icons in
 * light and dark. The rules below set what that theme cannot: surfaces, type
 * and shape. brand.js also says which mode GoAlert is in (data-fr-mode on
 * the html element), since GoAlert's own choice can differ from the device's.
 *
 * It depends on the class names of GoAlert's component library (MUI), which
 * are stable words (MuiButton-root), not on GoAlert's generated ones. After
 * an upgrade, look over the main screens: a rule that no longer matches
 * leaves that piece in GoAlert's own look, and nothing breaks.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@500;600&display=swap");

:root {
  --fr-page: #fcfbfa; /* page warm white */
  --fr-panel: #ffffff;
  --fr-rail: #f7f5f3;
  --fr-ink: #2d3848; /* navy-600 */
  --fr-ink-2: #4b566d; /* navy-500 */
  --fr-rule: #e4e1dd;
  --fr-orange: #f05828; /* orange-500, brand */
  --fr-orange-deep: #d8451a; /* orange-600 */
  --fr-orange-text: #b23613; /* orange-700: orange as text on white */
}

:root[data-fr-mode="dark"] {
  --fr-page: #121822; /* navy-900 */
  --fr-panel: #1a2230;
  --fr-rail: #151c28;
  --fr-ink: #f3f5f8; /* navy-50 */
  --fr-ink-2: #c2cad8; /* navy-200 */
  --fr-rule: #2c3648;
  --fr-orange-text: #ff9a6e; /* orange-300 */
}

/* ── Type ─────────────────────────────────────────────────────────────── */
#app-root,
#app-root .MuiTypography-root,
#app-root .MuiButtonBase-root,
#app-root .MuiInputBase-root,
#app-root .MuiFormLabel-root,
#app-root .MuiTableCell-root,
.MuiDialog-root,
.MuiDialog-root .MuiTypography-root,
.MuiDialog-root .MuiButtonBase-root,
.MuiDialog-root .MuiInputBase-root,
.MuiDialog-root .MuiFormLabel-root,
.MuiPopover-root .MuiTypography-root,
.MuiPopover-root .MuiButtonBase-root {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

#app-root h1,
#app-root h2,
#app-root h5.MuiTypography-root,
#app-root h6.MuiTypography-root,
#app-root .MuiCardHeader-title,
.MuiDialog-root .MuiDialogTitle-root,
.MuiDialog-root h1,
.MuiDialog-root h2 {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600 !important;
}

/* ── Surfaces ─────────────────────────────────────────────────────────── */
body:has(#app-root) {
  background: var(--fr-page);
}

#app-root,
#app-root main {
  background: var(--fr-page) !important;
  color: var(--fr-ink);
}

/* The top bar: the page's own colour and a rule under it, as the desk's. */
#app-root header.MuiAppBar-root {
  background: var(--fr-page) !important;
  color: var(--fr-ink) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--fr-rule);
}

#app-root header.MuiAppBar-root .MuiBreadcrumbs-root,
#app-root header.MuiAppBar-root .MuiBreadcrumbs-root a,
#app-root header.MuiAppBar-root .MuiTypography-root,
#app-root header.MuiAppBar-root .MuiSvgIcon-root {
  color: var(--fr-ink) !important;
}

/* The menu. */
#app-root .MuiDrawer-paper {
  background: var(--fr-rail) !important;
  color: var(--fr-ink) !important;
  border-right: 1px solid var(--fr-rule) !important;
}

#app-root .MuiDrawer-paper .MuiDivider-root {
  border-color: var(--fr-rule) !important;
}

#app-root .MuiDrawer-paper .MuiListItemButton-root {
  border-radius: 8px;
}

#app-root .MuiDrawer-paper .MuiListItemText-primary {
  font-size: 14px !important;
  font-weight: 500;
}

/* The mark and the name, in place of the crane. */
#app-root .MuiDrawer-paper img[alt="GoAlert"] {
  content: url("forwardrise-mark.png");
  height: 30px !important;
  width: 30px;
  margin: 15px 4px 15px 6px;
  object-fit: contain;
}

#app-root .MuiDrawer-paper h5.MuiTypography-root {
  font-size: 16px !important;
  color: var(--fr-ink) !important;
}

/* Panels: a rule and a rounder corner, not a shadow. */
#app-root main .MuiPaper-root,
.MuiDialog-paper,
.MuiPopover-paper,
.MuiMenu-paper {
  background-color: var(--fr-panel) !important;
  background-image: none !important;
  color: var(--fr-ink) !important;
}

#app-root main .MuiPaper-elevation1,
#app-root main .MuiCard-root {
  border: 1px solid var(--fr-rule);
  border-radius: 12px !important;
  box-shadow: none !important;
}

.MuiDialog-paper {
  border-radius: 12px !important;
}

#app-root .MuiTableCell-root,
#app-root main .MuiDivider-root {
  border-color: var(--fr-rule) !important;
}

/* ── Controls ─────────────────────────────────────────────────────────── */
#app-root .MuiButton-root,
.MuiDialog-root .MuiButton-root,
.MuiPopover-root .MuiButton-root {
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#app-root .MuiButton-containedPrimary,
.MuiDialog-root .MuiButton-containedPrimary,
.MuiPopover-root .MuiButton-containedPrimary {
  background-color: var(--fr-orange) !important;
  color: #ffffff !important;
}

#app-root .MuiButton-containedPrimary:hover,
.MuiDialog-root .MuiButton-containedPrimary:hover,
.MuiPopover-root .MuiButton-containedPrimary:hover {
  background-color: var(--fr-orange-deep) !important;
}

#app-root .MuiButton-containedPrimary.Mui-disabled,
.MuiDialog-root .MuiButton-containedPrimary.Mui-disabled {
  opacity: 0.5;
}

#app-root .MuiButton-textPrimary,
#app-root .MuiButton-outlinedPrimary,
.MuiDialog-root .MuiButton-textPrimary,
.MuiDialog-root .MuiButton-outlinedPrimary {
  color: var(--fr-orange-text) !important;
}

#app-root .MuiButton-outlinedPrimary,
.MuiDialog-root .MuiButton-outlinedPrimary {
  border-color: var(--fr-orange-text) !important;
}

#app-root .MuiTab-root {
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

#app-root .MuiTab-root.Mui-selected {
  color: var(--fr-orange-text) !important;
}

#app-root .MuiTabs-indicator {
  background-color: var(--fr-orange) !important;
}

#app-root .MuiOutlinedInput-root,
.MuiDialog-root .MuiOutlinedInput-root {
  border-radius: 8px !important;
}

#app-root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiDialog-root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--fr-orange) !important;
}

#app-root .MuiChip-root {
  border-radius: 6px !important;
}

/* ── Size: the desk's scale ───────────────────────────────────────────── */
/* GoAlert ships at 16px text, 46px menu rows and 24px icons. The desk is
 * 14px text, 32px rows and 16px icons, with a 16px page title. */
#app-root .MuiTypography-body1,
#app-root .MuiTypography-subtitle1,
#app-root .MuiListItemText-primary,
#app-root .MuiInputBase-root,
#app-root .MuiInputBase-input,
#app-root .MuiFormLabel-root,
#app-root .MuiMenuItem-root,
#app-root .MuiTableCell-root,
.MuiDialog-root .MuiTypography-body1,
.MuiDialog-root .MuiTypography-subtitle1,
.MuiDialog-root .MuiListItemText-primary,
.MuiDialog-root .MuiInputBase-root,
.MuiDialog-root .MuiInputBase-input,
.MuiDialog-root .MuiFormLabel-root,
.MuiPopover-root .MuiMenuItem-root,
.MuiPopover-root .MuiTypography-body1,
.MuiPopover-root .MuiListItemText-primary {
  font-size: 14px !important;
  line-height: 20px !important;
}

#app-root .MuiTypography-body2,
#app-root .MuiTypography-subtitle2,
#app-root .MuiListItemText-secondary,
.MuiDialog-root .MuiTypography-body2,
.MuiDialog-root .MuiListItemText-secondary,
.MuiPopover-root .MuiTypography-body2,
.MuiPopover-root .MuiListItemText-secondary {
  font-size: 13px !important;
  line-height: 19px !important;
}

#app-root .MuiTypography-caption,
.MuiDialog-root .MuiTypography-caption {
  font-size: 12px !important;
}

#app-root main h4.MuiTypography-root,
#app-root main .MuiTypography-h4 {
  font-size: 20px !important;
  line-height: 28px !important;
}

#app-root main h5.MuiTypography-root,
#app-root main .MuiTypography-h5,
.MuiDialog-root .MuiDialogTitle-root {
  font-size: 18px !important;
  line-height: 26px !important;
}

#app-root main h6.MuiTypography-root,
#app-root main .MuiTypography-h6,
#app-root .MuiCardHeader-title {
  font-size: 16px !important;
  line-height: 24px !important;
}

/* A floating label sits on the field's edge at three quarters of its size. */
#app-root .MuiInputLabel-shrink,
.MuiDialog-root .MuiInputLabel-shrink {
  line-height: 20px !important;
}

#app-root .MuiButton-root,
.MuiDialog-root .MuiButton-root,
.MuiPopover-root .MuiButton-root {
  font-size: 14px !important;
  line-height: 20px !important;
}

#app-root main .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeLarge) {
  font-size: 20px;
}

/* The top bar: the desk's 16px title, medium weight. */
#app-root header.MuiAppBar-root .MuiToolbar-root {
  min-height: 52px !important;
}

#app-root header.MuiAppBar-root .MuiBreadcrumbs-root .MuiTypography-root,
#app-root header.MuiAppBar-root h6.MuiTypography-root {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
}

/* The menu: 32px rows, 16px icons, 14px medium text. */
#app-root .MuiDrawer-paper .MuiListItemButton-root {
  min-height: 32px;
  margin: 1px 8px;
  padding: 5px 8px !important;
}

#app-root .MuiDrawer-paper .MuiListItemIcon-root {
  min-width: 26px !important;
}

#app-root .MuiDrawer-paper .MuiSvgIcon-root {
  font-size: 18px !important;
}

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

#app-root .MuiDrawer-paper .MuiListItemText-root .MuiTypography-root {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
}

/* The name beside the mark: the desk's, 14px medium, not a heading. */
#app-root .MuiDrawer-paper h5.MuiTypography-root,
#app-root .MuiDrawer-paper h5.MuiTypography-root b {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
}

#app-root .MuiDrawer-paper img[alt="GoAlert"] {
  height: 20px !important;
  width: 20px;
  margin: 14px 2px 14px 10px;
}

/* ── The first paint ──────────────────────────────────────────────────── */
/* GoAlert draws its crane while the app loads; the mark stands there.
 * Replace loading.png to change it (square, transparent; an SVG or an
 * animated image works too, with the name changed here). */
body:has(#app > .initial-load) {
  background: var(--fr-page);
}

#app > .initial-load > div {
  width: 96px !important;
  height: 96px !important;
  background: url("loading.png") center / contain no-repeat;
  animation: fr-loading 1.4s ease-in-out infinite;
}

#app > .initial-load > div > svg {
  display: none;
}

@keyframes fr-loading {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app > .initial-load > div {
    animation: none;
  }
}

/* The light, system and dark choice in the profile panel: sentence case. */
.MuiToggleButton-root {
  text-transform: none !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}