html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* MudMainContentの既定CSSは padding-top: var(--mud-appbar-height) を持つ(AppBar分の高さだけ本文を
   下げる仕組み)。MudAppBarコンポーネント自体を廃止した(2026-08-21、サイドバーへの移設)ため、AppBar無し
   前提で明示的に0へ上書きする。MainLayout.razor.css側の::deep指定では、MudMainContentが実際に
   レンダリングするdiv.mud-main-contentにBlazorのCSS分離属性が付与されず効かなかった(DevToolsで確認済み)
   ため、スコープの影響を受けないグローバルCSS側で対応する。 */
.mud-main-content {
    padding-top: 0 !important;
}

/* MudDivider(.mud-divider-fullwidth)はflex-grow:1を持つため、flexコンテナ(MudDrawer等)の中に置くと
   余った縦スペース全部を占有し、大きな帯として表示される不具合があった(2026-08-21、NavMenu.razorの
   サイドバー下部区切り線で発覚)。flexコンテナの外では効果が無いプロパティなので、グローバルに0へ
   固定しても他の使用箇所(Reports.razor/Settings.razor)への影響はない。 */
.mud-divider {
    flex-grow: 0 !important;
}

a, .btn-link {
    color: #006bb7;
}

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

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ダッシュボードのウィジェット編集(Components/User/Dashboard/Home.razor)関連。
   MudDialogのバックドロップ(背景オーバーレイ)やJSがdocument.createElementで生成する要素は
   Blazor CSS分離のスコープ属性が付かない(コンポーネント側の.razor.cssでは対象にできない)ため、
   このグローバルなapp.cssにまとめて置いている(2026-08-08)。 */

/* 「ウィジェットを追加」モーダルの背景。DialogOptions.BackgroundClassで指定している
   (Home.razor.cs参照)。pointer-events: noneにして、モーダルを開いたままでも後ろのダッシュボード
   グリッドへドラッグ&ドロップできるようにしている(モーダル自体は別要素なので引き続き操作できる)。 */
.add-widget-dialog-backdrop {
    pointer-events: none;
}

/* 追加モーダルのカードをダッシュボードのグリッドへドラッグしている間に表示される、大まかなドロップ先
   プレビュー。wwwroot/js/dashboardWidgets.jsがdocument.createElementで生成する。 */
.widget-catalog-drop-preview {
    border: 2px dashed var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
    border-radius: var(--mud-default-borderradius);
    pointer-events: none;
    z-index: 25;
}

/* ダッシュボードウィジェット本文のスクロール領域・ページャー(2026-08-08、「ウィジェット内でスクロール/
   ページングさせたい」への対応)。各ウィジェットは7つの別々のコンポーネントファイル(Components/User/
   Dashboard/Widgets/*.razor)に分かれているため、共通クラスは各コンポーネント個別の.razor.cssではなく
   ここ(グローバル)にまとめて置いている。
   使い方: タイトル(MudText)の次に本文を<div class="widget-scroll-body">で包む(Home.razor.css側の
   .widget-innerがflexの縦積みコンテナになっているので、これがflex:1で残り高さいっぱいに広がり、
   高さが足りない分はここでスクロールする)。ページングするウィジェット(通知・進捗ログ)は、
   .widget-scroll-bodyの下に.widget-pagerで前へ/次への操作を追加する(スクロールとページングは併用:
   1ページ=10件に区切った上で、そのページの中身がウィジェットの高さに収まらない場合はさらにスクロール
   できる)。優先度別タスクのように中身が常に少ないウィジェットはこのクラスを使わなくてよい。 */
.widget-scroll-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* 一覧画面(案件/タスク等)のMudTableラッパー。表示設定で列数が増えた場合や画面幅が狭い場合、
   ページ全体を横スクロールさせず、テーブル部分だけを横スクロールさせる(2026-08-21)。 */
.list-table-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.widget-pager {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-top: 4px;
}

/* ===== 管理者エリア(Components/Admin/**)共通スタイル(2026-08-18) =====
   メンバー向け(AppTheme.cs、紺+金)とは別のチャコール+アンバー配色。MudBlazorのテーマは
   アプリ全体で1つ(Routes.razorのMudThemeProvider)しか持てないため、管理者エリアはMudBlazorの
   カラーパラメータに頼らず、ここで定義するCSS変数+プレーンなHTML/CSSで見た目を組んでいる。
   変数はグローバル(:root)に置き、AdminLayout/AdminAuthLayoutどちらのスコープからも同じ値を使えるようにする。
   ライトモードは今回未実装(チャコール固定)。将来ライト配色を追加する場合はここに
   :root:not([data-admin-theme="dark"]) 等の切り替えを追加する想定。 */
:root {
    --admin-page-bg: #181A1E;
    --admin-card-bg: #26292F;
    --admin-sidebar-bg: #1B1D21;
    --admin-content-bg: #1D2025;
    --admin-text: #F1E9DB;
    --admin-text-secondary: #B3A691;
    --admin-text-muted: #8B8F98;
    --admin-border: #3A3E46;
    --admin-input-bg: #181A1E;
    --admin-active-bg: #3A2F14;
    --admin-active-text: #D9A441;
    --admin-accent: #C9963F;
    --admin-accent-text: #241A08;
    --admin-danger: #D9583F;
    --admin-badge-bg: #2A3A2E;
    --admin-badge-text: #7FC08A;
    --admin-link: #7FAAD6;
}

.admin-page-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--admin-text);
    margin: 0 0 1rem;
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.admin-kpi-card {
    background: var(--admin-card-bg);
    border: 0.5px solid var(--admin-border);
    border-radius: 8px;
    padding: 14px;
}

.admin-kpi-label {
    font-size: 12px;
    color: var(--admin-text-muted);
}

.admin-kpi-value {
    font-size: 22px;
    font-weight: 500;
    color: var(--admin-text);
    margin-top: 2px;
}

.admin-kpi-value-danger {
    color: var(--admin-danger);
}

.admin-panel-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 12px;
}

.admin-panel {
    background: var(--admin-card-bg);
    border: 0.5px solid var(--admin-border);
    border-radius: 8px;
    padding: 14px;
}

.admin-panel-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--admin-text);
    margin-bottom: 10px;
}

.admin-panel-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--admin-text-secondary);
    padding: 6px 0;
    border-bottom: 0.5px solid var(--admin-border);
}

.admin-panel-row:last-child {
    border-bottom: none;
}

.admin-panel-empty {
    font-size: 12px;
    color: var(--admin-text-muted);
}

/* 管理者アカウント画面(AdminAccounts.razor)のテーブル・フォーム共通パーツ */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 20px;
}

.admin-table th {
    text-align: left;
    font-size: 12px;
    color: var(--admin-text-muted);
    font-weight: 500;
    padding: 8px 10px;
    border-bottom: 0.5px solid var(--admin-border);
}

.admin-table td {
    padding: 10px;
    color: var(--admin-text);
    border-bottom: 0.5px solid var(--admin-border);
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 520px;
    margin-bottom: 14px;
}

.admin-form-label {
    font-size: 12px;
    color: var(--admin-text-secondary);
    display: block;
    margin-bottom: 4px;
}

.admin-form-input {
    width: 100%;
    height: 36px;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    background: var(--admin-input-bg);
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
}

.admin-form-error {
    font-size: 12px;
    color: var(--admin-danger);
    margin: -8px 0 12px;
}

.admin-button {
    background: var(--admin-accent);
    color: var(--admin-accent-text);
    border: none;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
}

.admin-button:disabled {
    opacity: .6;
    cursor: default;
}

.admin-badge-new {
    background: var(--admin-badge-bg);
    color: var(--admin-badge-text);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

@media (max-width: 900px) {
    .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-panel-grid { grid-template-columns: 1fr; }
    .admin-form-grid { grid-template-columns: 1fr; }
}