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

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

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

/* --- Table --- */
.mud-table-hover .no-hover {
    pointer-events: none;
    background-color: var(--wright-color-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(--wright-color-info);
    }
}

.mud-table-row.success {
    background-color: var(--wright-color-success-light) !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(--wright-color-success) !important;
    }
}

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

div.mud-table td:not(:last-child) {
    border-right: 1px solid var(--wright-color-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(--wright-color-background);
    border-right: 2px solid var(--wright-color-table-lines) !important;
}

.mud-data-grid td.mud-table-cell.sticky-right {
    background-color: var(--wright-color-background);
    border-left: 2px solid var(--wright-color-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(--wright-color-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(--wright-color-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(--wright-color-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(--wright-color-text-primary) !important;
}

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

/* --- Border --- */
.mud-border-divider {
    border-color: var(--wright-color-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(--wright-color-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(--wright-color-action-default-hover) 38%, transparent 38%) !important;
    }

    /* DatePicker のカレンダーアイコンはホバーサイズを少し大きく */
    .mud-picker .mud-input-adornment-icon-button:hover {
        background: radial-gradient(circle, var(--wright-color-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;
}