/* Corvid Rx — the thin CSS layer on top of MudBlazor. Keep it small. */

:root {
  --cr-crow: #15171C;
  --cr-crow-raised: #22252D;
  --cr-amber: #E8A33D;
  --cr-track: #ECEAE4;
  --cr-muted-dark: #B9BCC6;
  --cr-display: "Space Grotesk", "Inter", sans-serif;
}

/* Numbers */
.cr-num  { font-family: var(--cr-display); font-variant-numeric: tabular-nums; }
.cr-unit { font-size: .5em; font-weight: 500; color: var(--mud-palette-text-secondary); }

/* Flat cards: no shadows anywhere */
.mud-paper, .mud-card, .mud-table { box-shadow: none !important; }

/* Verdict chips — use with <MudChip Variant="Variant.Text" Size="Size.Small"> */
.cr-verdict { font-weight: 600; border-radius: 999px; }
.cr-verdict::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; background: var(--cr-dot);
}
.cr-verdict.rx     { background: #E3F3EA !important; color: #1E6B47 !important; --cr-dot: #2F9E6B; }
.cr-verdict.partly { background: #FBF0D6 !important; color: #7A4E00 !important; --cr-dot: #F2B33D; }
.cr-verdict.scaled { background: #FBE4E4 !important; color: #A12828 !important; --cr-dot: #C93A3A; }

.cr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.cr-dot.rx { background: #2F9E6B; } .cr-dot.partly { background: #F2B33D; } .cr-dot.scaled { background: #C93A3A; }

/* Progress track colour */
.mud-progress-linear { background-color: var(--cr-track); }

/* Threshold marker on CapacityBar */
.cr-capacity { position: relative; }
.cr-capacity-marker { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--cr-crow); }

/* Drawer: active item */
/* !important: MudBlazor colours the active link with the primary colour in a more specific rule. */
.mud-drawer .mud-nav-link.active {
  background: rgba(255, 255, 255, .08) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}
.mud-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--cr-amber) !important; }
.mud-drawer .mud-nav-link.mud-nav-link-disabled,
.mud-drawer .mud-nav-link.mud-nav-link-disabled .mud-nav-link-icon { color: #8D92A0 !important; }

/* Dark surfaces (hero cards, mobile headers) */
.cr-dark { background: var(--cr-crow) !important; color: #FFFFFF; }
.cr-dark .mud-typography-caption, .cr-dark .cr-muted { color: var(--cr-muted-dark); }
.cr-dark-tile { background: var(--cr-crow-raised); border-radius: 10px; padding: 10px 12px; }

/* Mobile bottom nav */
.cr-bottomnav {
  /* Above the More sheet (a drawer, 1100) so the bar stays put while it's open; below dialogs (1400). */
  position: fixed; inset: auto 0 0 0; z-index: 1350;
  background: var(--cr-crow);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  padding: 8px 8px calc(12px + env(safe-area-inset-bottom));
}
.cr-bottomnav a, .cr-bottomnav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 48px; font-size: 11px; color: var(--cr-muted-dark); text-decoration: none;
}
.cr-bottomnav button { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
/* The unread count on More: an amber pill on the icon's top right. */
.cr-tab-icon { position: relative; display: inline-flex; }
.cr-tab-count {
  position: absolute; top: -6px; left: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--cr-amber); color: var(--cr-crow); border: 2px solid var(--cr-crow); box-sizing: content-box;
  font: 700 11px/18px var(--cr-display); text-align: center;
}
.cr-bottomnav a.active, .cr-bottomnav button.active { color: #FFFFFF; font-weight: 600; }
.cr-bottomnav a.active .mud-icon-root, .cr-bottomnav button.active .mud-icon-root { color: var(--cr-amber); }
/* More: the pages that don't fit in the bottom nav, as a sheet above it. MudBlazor hides a closed bottom drawer
   with bottom: -height, which doesn't work for a sheet as tall as its links: it would sit mid-page while closed.
   Slide it out of view instead, and hide it so it can't flash or take focus. */
.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.cr-more-sheet {
  bottom: 0; transform: translateY(100%); visibility: hidden;
  border-radius: 16px 16px 0 0; padding-bottom: calc(88px + env(safe-area-inset-bottom));
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 225ms;
}
.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.cr-more-sheet.mud-drawer--open {
  transform: none; visibility: visible;
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
}
.cr-fab {
  justify-self: center; width: 56px; height: 56px; margin-top: -24px;
  border-radius: 50%; border: 4px solid var(--cr-crow);
  background: var(--mud-palette-primary); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.cr-has-bottomnav { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* Horizontal scroll rows (gap cards on mobile) */
.cr-scroll-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.cr-scroll-row > * { flex: 0 0 150px; }

/* Verdict chips and dots when there is no verdict yet. */
.cr-verdict.none { background: var(--cr-track) !important; color: var(--mud-palette-text-secondary) !important; --cr-dot: #8D92A0; }
.cr-dot.none { background: #8D92A0; }

/* The page column: room for the bottom nav on phones; the app bar's padding only where there is one. */
@media (max-width: 959.98px) { .mud-main-content { padding-top: 0 !important; } }
.cr-sticky-footer {
  position: sticky; bottom: 0; z-index: 2; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--mud-palette-background); border-top: 1px solid var(--mud-palette-lines-default);
}

/* FocusOnNavigate moves focus to the page title for screen readers; no ring needed there. */
h1:focus { outline: none; }

/* Shown while the app downloads, before MudBlazor runs. Blazor sets --blazor-load-percentage as files arrive. */
.page-loader {
  display: grid; place-content: center; justify-items: center; gap: 16px; height: 100dvh;
  font: 700 1.5rem "Space Grotesk", system-ui, sans-serif; color: #FFFFFF; background: var(--cr-crow);
}
.page-loader-bar { width: 160px; height: 4px; border-radius: 2px; background: rgba(232, 163, 61, .25); overflow: hidden; }
.page-loader-bar::after {
  content: ""; display: block; height: 100%; width: var(--blazor-load-percentage, 0%);
  background: var(--cr-amber); transition: width .2s;
}

#blazor-error-ui {
  display: none; position: fixed; inset: auto 0 0 0; z-index: 2000;
  padding: .75rem 1.25rem; background: lightyellow; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
}
#blazor-error-ui .dismiss { position: absolute; right: .75rem; cursor: pointer; }

/* The big time field on the log screen. */
.cr-time-input input.mud-input-root {
  font-family: var(--cr-display) !important; font-size: 56px !important; font-weight: 700; line-height: 1.2;
  text-align: center; font-variant-numeric: tabular-nums; height: auto;
}

/* Toasts above the bottom nav on phones instead of over it. */
@media (max-width: 959.98px) { .mud-snackbar-location-bottom-center { bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* Achievements: amber only on dark, so an earned badge is a dark disc with an amber ring. */
.cr-badge {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cr-track); color: #8D92A0;
}
.cr-badge.earned { background: var(--cr-crow); color: var(--cr-amber); box-shadow: inset 0 0 0 2px var(--cr-amber); }
.cr-earned { color: #1E6B47; font-weight: 600; }
.cr-ach-pill {
  border: 1px solid var(--cr-amber); color: var(--cr-amber); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 600;
}
.cr-amber-bar { background-color: var(--cr-crow-raised) !important; }
.cr-amber-bar .mud-progress-linear-bar { background-color: var(--cr-amber) !important; }

/* A workout's time domain next to its name: Sprint, Short, Medium, Long. */
.cr-domain { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; font-size: 0.7rem; font-weight: 600; line-height: 1.5; color: var(--mud-palette-text-secondary); vertical-align: middle; }

/* Boxes: one block per box, split by a line. */
.cr-box-row + .cr-box-row { border-top: 1px solid var(--mud-palette-lines-default); padding-top: 16px; }

/* Inbox: unread rows stand out until the page is left (opening it marks them read). */
.cr-inbox-item + .cr-inbox-item { border-top: 1px solid var(--mud-palette-lines-default); }
.cr-inbox-item.unread { background: #F4F2FD; }
.cr-unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mud-palette-primary); flex: none; }