/* MudBlazor v9 上書き・カスタマイズ
 * MudBlazor のデフォルトスタイルを上書きするルールを集約 */

:root {
    --mud-drawer-width-left: 245px !important;
    --mud-drawer-width-right: 245px !important;
    --mud-palette-table-striped: #FBFBFB !important;
    --mud-palette-table-hover: #EAEAEA !important;
}

/* --- Popover --- */
.mud-popover-fixed {
    position: fixed !important;
}

/* --- Table --- */
.mud-table-hover .no-hover {
    pointer-events: none;
    background-color: var(--mud-palette-surface);
}

.mud-tab.mud-tab-active {
    border-bottom: 2px solid #FFFFFF;
}

.mud-table-row.abandon {
    background-color: #FCE4EC !important;
}

@media(hover: hover)and (pointer: fine) {
    .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.abandon:hover {
        background-color: #F8BBD0 !important;
    }
}

@media(hover: hover)and (pointer: fine) {
    .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.info:hover {
        background-color: var(--mud-palette-info);
    }
}

.mud-table-row.success {
    background-color: var(--mud-palette-success-lighten) !important;
}

@media(hover: hover)and (pointer: fine) {
    .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.success:hover {
        background-color: var(--mud-palette-success) !important;
    }
}

div.mud-table th:not(:last-child) {
    border-right: 1px solid var(--mud-palette-table-lines);
}

div.mud-table td:not(:last-child) {
    border-right: 1px solid var(--mud-palette-table-lines);
}

/* 日報ダイアログなどのWrightErroorTipを用いたセルでインプットのエラーを非表示にする */
.mud-table-cell div.wright-errortip-root div.mud-input-helper-text.mud-input-error div {
    display: none;
}

.mud-data-grid td.mud-table-cell.sticky-left {
    background-color: var(--mud-palette-background);
    border-right: 2px solid var(--mud-palette-table-lines) !important;
}

.mud-data-grid td.mud-table-cell.sticky-right {
    background-color: var(--mud-palette-background);
    border-left: 2px solid var(--mud-palette-table-lines) !important;
}

/* --- Tabs --- */
.tabs-secondary > .mud-tabs-toolbar {
    background-color: #ECEFF1;
}

.mud-tab .mud-tab-icon-text {
    font-size: 1.25rem;
    padding-bottom: 2px;
}

/* --- Checkbox --- */
.mud-checkbox .mud-checkbox-dense {
    padding: 0px;
}

/* --- ExpandPanel --- */
.mud-expand-panel-content,
.mud-expand-panel-header {
    background-color: var(--mud-palette-background-gray);
}

/* --- Input (Readonly) --- */
/* MudTextField, MudNumericField の Readonly 時にクリック・ホバーのエフェクトを無効化
 * MudSelect も内部的に <input readonly> を使用するため、:not(.mud-select-input) で除外する */
.mud-input:not(.mud-select-input):has(> input:read-only):focus-within .mud-input-outlined-border,
.mud-input:has(> textarea:read-only):focus-within .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--mud-palette-lines-inputs) !important;
}

@media (hover: hover) and (pointer: fine) {
    .mud-input:not(.mud-select-input):has(> input:read-only):hover .mud-input-outlined-border,
    .mud-input:has(> textarea:read-only):hover .mud-input-outlined-border {
        border-color: var(--mud-palette-lines-inputs) !important;
    }
}

.mud-input:not(.mud-select-input):focus-within:has(> input:read-only)~label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within:has(> textarea:read-only)~label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-text-primary) !important;
}

/* --- NavGroup --- */
/* NavGroupの中にある子NavGroupだけ対象 */
.mud-nav-group .mud-collapse-wrapper {
    overflow: hidden !important;
}

/* --- Border --- */
.mud-border-divider {
    border-color: var(--mud-palette-divider) !important;
}

/* --- DatePicker --- */
.mud-picker-calendar-transition {
    margin-bottom: 8px;
}

/* --- WrightDatePickerDialog --- */
/* ダイアログ背景を透明化して角の白い線を除去 */
.wright-date-picker-dialog.mud-dialog {
    background: transparent;
    box-shadow: none;
}

/* カード背景を透明化して角の白い線を除去 */
.wright-date-picker-dialog .mud-picker-paper {
    background: transparent;
    box-shadow: none;
}

/* カレンダー日付部分の背景を明示指定（ダイアログ透明化による透過を防止） */
.wright-date-picker-dialog .mud-picker-content {
    background: var(--mud-palette-surface);
}

/* --- AdornmentIconButton ホバーエフェクト --- */
/* MudBlazor v9: AdornmentIconButton のホバーエフェクトをクリアボタン（×）と同サイズに縮小
 * radial-gradient でホバーの円だけ小さくし、ボタンの位置やアイコンサイズは変更しない */
@media (hover: hover) and (pointer: fine) {
    .mud-input-adornment-icon-button:hover {
        background-color: transparent !important;
        background: radial-gradient(circle, var(--mud-palette-action-default-hover) 38%, transparent 38%) !important;
    }

    /* DatePicker のカレンダーアイコンはホバーサイズを少し大きく */
    .mud-picker .mud-input-adornment-icon-button:hover {
        background: radial-gradient(circle, var(--mud-palette-action-default-hover) 48%, transparent 48%) !important;
    }

    /* WrightAutocomplete のデフォルト▼アイコンのホバー・リップルを無効化し、MudSelect と同じ挙動にする */
    .no-adornment-hover .mud-input-adornment-icon-button:hover,
    .no-adornment-hover .mud-input-adornment-icon-button:active,
    .no-adornment-hover .mud-input-adornment-icon-button:focus-within {
        background: none !important;
        background-color: transparent !important;
    }
}

/* リップルエフェクト（JSが動的に追加する要素）も非表示にする */
.no-adornment-hover .mud-input-adornment-icon-button .mud-ripple-effect {
    display: none !important;
}

/* --- DialogTemplate --- */
/* MudDialog は Portal 構造（body直下）でレンダリングされるため、
 * コンポーネントスコープ CSS は効かない。グローバルで定義する */
.dialog-template.mud-dialog {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.dialog-template .mud-dialog-title {
    padding: 24px 24px 4px;
}

.dialog-template .dialog-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F2937;
    letter-spacing: -0.01em;
}

.dialog-template .mud-dialog-content {
    padding: 0 24px 12px;
    border-bottom: 1px solid #E5E7EB;
}

.dialog-template .dialog-content-text {
    font-size: 0.9375rem;
    color: #6B7280;
    margin: 0;
}

.dialog-template .mud-dialog-actions {
    padding: 16px 24px;
}

.dialog-template .dialog-actions-stack {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.dialog-template .dialog-actions-stack .mud-button-root {
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 16px;
    text-transform: none;
    letter-spacing: 0.01em;
}

.dialog-template .dialog-actions-stack .btn-cancel {
    background-color: #F5F6F8;
    color: #374151;
    border: 1px solid #D1D5DB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.dialog-template .dialog-actions-stack .btn-cancel:hover {
    background-color: #E5E7EB;
    border-color: #B0B5BD;
}