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-brand: #2580c8;
  --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: 0;
  border-radius: 1rem;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.app-loading__brand {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: var(--gmc-loader-brand);
  font-weight: 800;
  font-size: 1.92rem;
  letter-spacing: 0.02em;
}

.app-loading__brand::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -3.2rem;
  width: 1.8rem;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.82) 48%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-16deg);
  animation: gmc-brand-sweep 2.1s ease-in-out infinite;
}

.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);
}

/* Company settings: postal code row layout */
.company-settings-postal-row {
  width: 100%;
  flex-wrap: nowrap;
}

.company-settings-postal-input {
  flex: 1 1 auto;
  min-width: 0;
}

.company-settings-postal-button {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .company-settings-postal-row {
    flex-wrap: wrap;
  }

  .company-settings-postal-button {
    margin-left: 0;
    width: 100%;
  }
}

/* Signup: postal code row layout (keep button stable even when validation text appears) */
.signup-postal-row {
  width: 100%;
  flex-wrap: nowrap;
}

.signup-postal-input {
  flex: 1 1 auto;
  min-width: 0;
}

.signup-postal-button {
  white-space: nowrap;
  /* Align with the input box (not the helper/validation text) */
  margin-top: 22px;
}

@media (max-width: 768px) {
  .signup-postal-row {
    flex-wrap: wrap;
  }

  .signup-postal-button {
    margin-top: 0;
    width: 100%;
  }
}

.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;
}

/* Genba settings: clickable compact cards */
.gm-action-card {
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.gm-action-card:hover {
  transform: translateY(-1px);
}

.gm-action-card:focus-visible {
  outline: 2px solid rgba(37, 140, 251, 0.85);
  outline-offset: 2px;
}

.gm-action-card__desc {
  word-break: break-word;
}

@media (max-width: 600px) {
  .gm-action-card__desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-clamp: 1;
  }
}

/* Genba detail: keep the tab row within the viewport width */
@media (max-width: 960px) {
  .gm-genba-tabs .mud-tab,
  .gm-genba-list-tabs .mud-tab {
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 600px) {
  .gm-genba-tabs .mud-tab,
  .gm-genba-list-tabs .mud-tab {
    min-width: 44px;
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Keep text when possible; truncate instead of wrapping */
  .gm-genba-tabs .mud-tab .mud-tab-text,
  .gm-genba-tabs .mud-tab .mud-tab-label,
  .gm-genba-list-tabs .mud-tab .mud-tab-text,
  .gm-genba-list-tabs .mud-tab .mud-tab-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 92px;
  }
}

/* Very narrow screens: icon-only tabs (tooltips via title attr) */
@media (max-width: 420px) {
  .gm-genba-tabs .mud-tab .mud-tab-text,
  .gm-genba-tabs .mud-tab .mud-tab-label {
    display: none;
  }

  /* Remove extra spacing that assumes a visible label */
  .gm-genba-tabs .mud-tab .mud-icon-root,
  .gm-genba-tabs .mud-tab .mud-icon {
    margin-right: 0 !important;
  }
}

.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");
}

/*
  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);
}

/* Global table UX unification */
.mud-table-root .mud-table-container {
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 4px;
}

.mud-table-root .mud-table-container table,
.mud-simple-table table {
  border-collapse: collapse;
}

.mud-table-root .mud-table-container table th,
.mud-table-root .mud-table-container table td,
.mud-simple-table table th,
.mud-simple-table table td {
  border: 1px solid var(--mud-palette-lines-default);
}

/* Hide table appearance controllers under tables (Dense / Striped / Bordered). */
.mud-table-root + .d-flex.flex-wrap.mt-4 {
  display: none !important;
}

/* Hide table pagers globally (rows-per-page and navigation arrows). */
.mud-table-root .mud-table-pagination,
.mud-data-grid .mud-table-pagination {
  display: none !important;
}

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

@keyframes gmc-brand-sweep {
  0% {
    left: -3.2rem;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  70% {
    left: calc(100% + 3.2rem);
    opacity: 1;
  }

  100% {
    left: calc(100% + 3.2rem);
    opacity: 0;
  }
}

.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;
  }

  .app-loading__brand::after {
    animation: none;
    opacity: 0;
  }

  .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;
}

/* The bar that says a new version has arrived (js/newVersionNotice.js). It floats above the
   app bar and drawers and leaves the page usable: nothing reloads until "Reload" is pressed. */
.gmc-new-version {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1450;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  border-radius: 6px;
  background: var(--mud-palette-dark, #424242);
  color: var(--mud-palette-dark-text, #fff);
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  font-size: 0.875rem;
  line-height: 1.4;
}

.gmc-new-version button {
  font: inherit;
  border: 0;
  border-radius: 4px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
}

.gmc-new-version__reload {
  background: var(--mud-palette-primary, #1565c0);
  color: var(--mud-palette-primary-text, #fff);
  font-weight: 600;
}

.gmc-new-version__later {
  background: transparent;
  color: inherit;
}

.gmc-new-version button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 地図の上に重ねる操作（背景地図の切り替え・拡大縮小）——地だけを半透明にして後ろをぼかし、下の地図を透かして見せる（UIX-048 (6)）。
   図記号・字・選んだ釦は不透明のまま（部品ごと薄くすると、航空写真の上で図記号と選んだ印が読めなくなる）。
   main.css は MudBlazor と Leaflet の様式より先に読まれるので、詳細度で勝たせる（.mud-paper.… と .leaflet-container .…）。 */
.mud-paper.gmc-map-control,
.leaflet-container .leaflet-bar {
  background-color: color-mix(in srgb, var(--mud-palette-surface) 75%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.15s ease;
}

/* 操作しているあいだは不透明——指を載せる・キーボードの焦点。 */
.mud-paper.gmc-map-control:hover,
.mud-paper.gmc-map-control:focus-within,
.leaflet-container .leaflet-bar:hover,
.leaflet-container .leaflet-bar:focus-within {
  background-color: var(--mud-palette-surface);
}

/* 選んでいない釦の図記号は主題の字の色——既定の灰（action-default）は、暗い表示で明るい地図が透けると対比が 3:1 を割る（手元で 2.44）。 */
.mud-paper.gmc-map-control .mud-icon-button.mud-button-outlined {
  color: var(--mud-palette-text-primary);
}

/* 拡大縮小の釦は札の地を見せ、主題の字と線の色を読む（Leaflet の既定は白地に黒——暗い表示でも白い）。 */
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-bar a:hover {
  background-color: transparent;
  color: var(--mud-palette-text-primary);
  border-bottom-color: var(--mud-palette-lines-default);
}

.leaflet-container .leaflet-bar a:hover {
  background-color: var(--mud-palette-action-default-hover);
}

.leaflet-container .leaflet-bar a.leaflet-disabled {
  background-color: transparent;
  color: var(--mud-palette-text-disabled);
}

/* ぼかしを持たない閲覧器では、地を濃くする（ぼかし無しの 75% は下の模様が強い）。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mud-paper.gmc-map-control,
  .leaflet-container .leaflet-bar {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent);
  }
}

/* OS の「透明度を下げる」では不透明・ぼかし無し。 */
@media (prefers-reduced-transparency: reduce) {
  .mud-paper.gmc-map-control,
  .leaflet-container .leaflet-bar {
    background-color: var(--mud-palette-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* UIX-070 (a): 一覧の行の「…」のメニュー（Shared/Components/RowActionsMenu）——機器一覧・現場一覧と同じ見た目。
   main.css は MudBlazor の様式より前に読まれるので、MudBlazor の釦の様式より詳細度を上げる（.row-actions .mud-icon-button…）。 */
.row-actions .mud-icon-button.row-actions-trigger {
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    opacity: 0.74;
    transform: scale(0.96);
    transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.row-actions .mud-icon-button.row-actions-trigger:hover {
    background: var(--mud-palette-action-default-hover);
    opacity: 1;
    transform: scale(1);
}

.mud-table-body tr:hover .row-actions .mud-icon-button.row-actions-trigger,
.mud-table-body tr:focus-within .row-actions .mud-icon-button.row-actions-trigger,
.row-actions .row-actions-menu.mud-menu-open .mud-icon-button.row-actions-trigger {
    opacity: 1;
    transform: scale(1);
    border-color: var(--mud-palette-primary);
}

/* 危ない項目は機器一覧・現場一覧と同じ字の色（赤くしない——危なさは区切りと確かめの窓が言う）。 */
.row-actions-item-danger,
.row-actions-item-danger .mud-icon-root,
.row-actions-item-danger .mud-list-item-text {
    color: var(--mud-palette-text-primary) !important;
}