html,
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
}

:root {
  --gmc-loader-bg: #ffffff;
  --gmc-loader-text: #0f172a;
  --gmc-loader-muted: #475569;
  --gmc-loader-accent: #1b6ec2;
  --gmc-loader-accent-muted: rgba(27, 110, 194, 0.18);
  --gmc-loader-panel: rgba(255, 255, 255, 0.9);
  --gmc-loader-panel-border: rgba(15, 23, 42, 0.08);
}

h1:focus {
  outline: none;
}

a,
.btn-link {
  color: var(--mud-palette-primary, #0071c1);
}

/* キーボードで焦点の来たリンクに輪を出す（UIX-063）。MudBlazor の a:focus-visible { outline: none } は後から読まれるので、
   html を前に付けて詳細度で勝つ。色はリンクの字の色——字が読める所なら輪も見える。指やマウスで押したときは出さない。 */
html a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* 横の献立のリンクは引き出しの幅いっぱいで、引き出しは中を巻き取る（overflow: auto）——外へ出した輪は左右が切れる。内側に描く。 */
html a.mud-nav-link:focus-visible {
  outline-offset: -2px;
}

/* 横の献立を畳むと、MudBlazor は献立の字を display: none で隠す——読み上げの名前からも消え、図記号だけのリンクになる。
   畳んだ形でも字は見えないまま読み上げに残す（名前は見える字そのもの）。MudBlazor と同じ要素を選び、html を前に付けて詳細度で勝つ。 */
html .mud-drawer--closed.mud-drawer-mini > .mud-drawer-content > .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* キーボードで焦点の来た釦に輪を出す（UIX-065）。MudBlazor の button:focus { outline: none } は焦点の輪を消し、
   代わりの印（6% の色）はほぼ見えない。色は釦の字（図記号）の色——字が見える所なら輪も見える。 */
html button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 塗った釦は字が地の上の白——外側の輪は頁の字の色。間に頁の地が見えるので、どの色の塗りでも頁の地と対比する。 */
html .mud-button-filled:focus-visible {
  outline-color: var(--mud-palette-text-primary);
}

/* チェック・スイッチ・ラジオは、焦点を受ける入力が見えない——見える丸（焦点で 6% の色が乗る丸）の縁に輪を出す。
   色は頁の字の色（スイッチの丸の字の色はつまみの白で、白い頁で消える）。内側に描く（スイッチは外へ出すと枠で切れる）。 */
html .mud-icon-button:has(input:focus-visible) {
  outline: 2px solid var(--mud-palette-text-primary);
  outline-offset: -2px;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem white,
    0 0 0 0.25rem #258cfb;
}

.content {
  padding-top: 1.1rem;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

/* Initial app loader (shown before Blazor mounts). */
.app-loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(
      1200px 600px at 20% 10%,
      rgba(27, 110, 194, 0.08),
      transparent 55%
    ),
    radial-gradient(
      900px 500px at 85% 25%,
      rgba(59, 130, 246, 0.06),
      transparent 60%
    ),
    var(--gmc-loader-bg);
  color: var(--gmc-loader-text);
}

.app-loading__panel {
  width: min(420px, 92vw);
  text-align: center;
  padding: 1.25rem 1.25rem 1.35rem;
  border-radius: 1rem;
  background: var(--gmc-loader-panel);
  border: none;
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.app-loading__brand {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.app-loading__subtitle {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--gmc-loader-muted);
}

.app-loading__progress {
  margin-top: 1rem;
}

/* Startup loader visuals (Blazor progress ring + text). */
.loading-progress {
  display: block;
  width: 6.5rem;
  height: 6.5rem;
  margin: 0 auto;
  animation: gmc-loader-spin 1.1s linear infinite;
}

.loading-progress circle {
  fill: none;
  stroke: var(--gmc-loader-accent-muted);
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: var(--gmc-loader-accent);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
  stroke-linecap: round;
}

.loading-progress-text {
  margin-top: 0.75rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gmc-loader-text);
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}

@keyframes gmc-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.app-loading__noscript {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--gmc-loader-muted);
}

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: none;
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

@media (prefers-reduced-motion: reduce) {
  .loading-progress {
    animation: none;
  }

  .loading-progress circle:last-child {
    transition: none;
  }
}

code {
  color: var(--mud-palette-text-primary);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.gmc-selected-user-row {
  background-color: rgba(var(--mud-palette-success-rgb), 0.15);
}

/*
  Browser autofill (UIX-057). The browser paints its autofill colour on the <input> only, but the
  adornment (the eye button of a password field) sits beside the <input> inside the same field, so an
  autofilled field looked split in two colours. In the dark theme the browser also kept its light colour
  and black text (MudBlazor does not switch color-scheme), and the floating label became unreadable.
  Paint the whole field in one colour made from the theme (12% of the primary colour over the surface,
  close to the browser's own light and dark autofill colours) and keep the theme's text colour.
  The colour is set on every field, outside :has(), so the <input> rule stays valid where :has() is
  not supported.
*/
.mud-input {
  --gmc-autofill: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
}

/* The field itself has square corners; its outline (the fieldset inside) is the rounded part. */
.mud-input:has(> input:-webkit-autofill) {
  background-color: var(--gmc-autofill);
  border-radius: var(--mud-default-borderradius);
}

/* The browser's background colour is !important and cannot be replaced; an inset shadow paints over it. */
.mud-input > input.mud-input-root:-webkit-autofill {
  box-shadow: 0 0 0 100vmax var(--gmc-autofill) inset;
  -webkit-text-fill-color: var(--mud-palette-text-primary);
  caret-color: var(--mud-palette-text-primary);
}