/* ========================================
   app.css — グローバルスタイル
   記述順: :root → html,body → レイアウト → システム通知 → Wright共通 → コンポーネント → ユーティリティ
   ======================================== */

/* ===== 1. CSS 変数 ===== */
:root {
    --appbar-height: 56px;
    --nav-width-expanded: 240px;
    --nav-width-collapsed: 56px;
    --scrollbar-width: 4px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(102, 102, 102, 0.5);
    --scrollbar-thumb-hover: rgba(102, 102, 102, 0.35);

    /* WrightDialog z-index（ネスト時は depth * 10 を加算） */
    --wright-zindex-dialog: 1100;

    /* ナビパネル色 */
    --nav-bg: #f7f8fa;
    --nav-text: #333;
    --nav-text-muted: #666;
    --nav-text-hint: #999;
    --nav-border: #e0e0e0;
    --nav-hover: rgba(0, 0, 0, 0.04);
    --nav-active-bg: rgba(55, 77, 108, 0.08);
    --nav-parent-active-bg: rgba(0, 0, 0, 0.02);
    --nav-tree-line: #d0d0d0;

    /* 日報チャット: 未読境界線 */
    --unread-divider-color: #f23f42;
}

/* ===== 2. グローバルリセット ===== */
html, body {
    height: 100%;
    margin: 0;
    background-color: #f7f7f7;
}

/* ===== 3. レイアウト ===== */

/* --- ページ構造 --- */
#page-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#site-header {
    z-index: 300;
    position: sticky;
    width: 100%;
    top: 0;
    flex-shrink: 0;
}

#main-content-landing {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    padding-left: var(--nav-width-expanded);
    transition: padding-left 0.25s ease;
}

#main-content-landing.nav-collapsed {
    padding-left: var(--nav-width-collapsed);
}

@media (max-width: 959px) {
    #main-content-landing,
    #main-content-landing.nav-collapsed {
        padding-left: 0 !important;
    }
}

@media (max-height: 900px) {
    #main-content-landing {
        scrollbar-gutter: stable;
    }
}

/* --- AppBar --- */
.wright-appbar {
    display: flex;
    align-items: center;
    height: var(--appbar-height);
    background-color: #1D2939;
    color: #fff;
}

.wright-appbar .mud-icon-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: inherit;
    margin: 0 8px;
}

.wright-appbar .mud-icon-button .mud-icon-root {
    color: inherit;
    font-size: 20px;
}

.wright-appbar .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* ベルアイコン: ripple クリップ + バッジ数字（MudBadge の内部クラスに依存しない実装）*/
.appbar-notification {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.appbar-notification-clip {
    overflow: hidden;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.appbar-notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #d32f2f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
}

.wright-appbar .appbar-avatar-btn:hover {
    background-color: transparent;
}

.wright-appbar .appbar-avatar-btn:hover .mud-icon-root {
    background-color: #5a8ac5;
}

.wright-appbar .appbar-avatar-btn .mud-icon-root {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #4a7ab5;
    color: #fff;
    border: 1px solid #fff;
    padding: 5px;
    box-sizing: border-box;
    font-size: 22px;
    transition: none;
}

/* --- ナビパネル (MudTooltip 内部 → グローバル定義) --- */

/* ナビリンク: panel padding で pill 化、width/margin 不要 */
.nav-link {
    display: flex;
    align-items: center;
    height: 40px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.nav-link:hover {
    background-color: var(--nav-hover);
}

/* icon-area: 40px = 折りたたみ幅(56px) - panel padding(8px×2) */
.nav-link-icon-area {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
}

/* ラベル */
.nav-link-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* アイコン色 */
.nav-link-icon {
    color: var(--nav-text-muted);
}

/* アイコンの右側のコンテンツ (ラベル + 矢印): Drawer 折りたたみ時に隠れる */
.nav-collapsible-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

/* Drawer 折りたたみ時にフェードアウト */
.nav-group--collapsed .nav-collapsible-content,
.nav-item--collapsed .nav-collapsible-content {
    opacity: 0;
}

/* NavGroup toggle: div (role=button) — block auto-fill で <a> と同じレンダリング */
.nav-group-toggle {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    color: var(--nav-text);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.15s ease;
    user-select: none;
}

.nav-group-toggle:hover {
    background-color: var(--nav-hover);
}

/* グループラベル */
.nav-group-label {
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 展開矢印 */
.nav-group-arrow {
    margin-left: 8px;
    transition: transform 0.25s ease;
    color: var(--nav-text-hint);
    font-size: 18px !important;
}

.nav-group-arrow--open {
    transform: rotate(180deg);
}

/* トップレベル NavGroup: 子にアクティブ要素を含む場合アクセントバー表示 */
.nav-group:not(.nav-group--nested):has(.nav-item--active)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--mud-palette-primary);
}

/* 展開時: 子にアクティブ要素を含む場合、toggle に薄い背景色 */
.nav-group:not(.nav-group--collapsed):has(.nav-item--active) > .mud-tooltip-root .nav-group-toggle {
    background-color: var(--nav-parent-active-bg);
}

/* Drawer 折りたたみ時: アクティブ子要素を含む NavGroup のアイコンを active 化 */
.nav-group--collapsed:has(.nav-item--active) .nav-group-toggle {
    color: var(--mud-palette-primary);
    background-color: var(--nav-active-bg);
}

.nav-group--collapsed:has(.nav-item--active) .nav-link-icon {
    color: var(--mud-palette-primary);
}

/* ===== 4. システム通知・バリデーション ===== */
.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000 !important;
}

/* ===== 5. Wright 共通コンポーネント ===== */
.wright-border {
    border-bottom: 1px solid #d6d5d5;
}

/* パンくず: 画面高さが低い端末では折りたたむ */
.breadcrumb-bg {
    overflow: hidden;
    max-height: 48px;
    transition: max-height 0.25s ease;
}

@media (max-height: 768px) {
    .breadcrumb-bg {
        max-height: 0;
    }
}

/* ===== 6. コンポーネント ===== */

/* DialogTemplate */
.dialog-template .dialog-title {
    width: 100%;
    font-weight: 600;
}

.dialog-template .dialog-content-text {
    color: var(--mud-palette-text-secondary);
    padding: 8px 0;
}

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

.dialog-template .dialog-actions-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

.dialog-template .dialog-actions-stack .mud-button-root {
    height: 40px;
}

@media (min-width: 600px) {
    .dialog-template .dialog-actions-stack {
        flex-direction: row;
        gap: 12px;
    }

    .dialog-template .dialog-actions-stack>* {
        flex: 1;
    }
}

/* ===== 7. ユーティリティ ===== */
.unselected-item {
    color: red !important;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.underline {
    text-decoration: underline;
}

.created-icon-color .mud-icon-root {
    color: #9CCC65 !important;
}

.pending-icon-color .mud-icon-root {
    color: #FDD835 !important;
}

.rejected-icon-color .mud-icon-root {
    color: #E53935 !important;
}

.approved-icon-color .mud-icon-root {
    color: #1E88E5 !important;
}

.cancel-icon-color .mud-icon-root {
    color: #BDBDBD !important;
}

.created-icon-color.mud-icon-root {
    color: #9CCC65 !important;
}

.pending-icon-color.mud-icon-root {
    color: #FDD835 !important;
}

.rejected-icon-color.mud-icon-root {
    color: #E53935 !important;
}

.approved-icon-color.mud-icon-root {
    color: #1E88E5 !important;
}

.cancel-icon-color.mud-icon-root {
    color: #BDBDBD !important;
}

.clickable:hover {
    background-color: rgba(39, 44, 52, 0.04);
    cursor: pointer;
}

.loading:hover {
    cursor: wait;
}

/* スクロールバー共通 (DefaultScrollbar="true" で MudBlazor デフォルトを無効化済み) */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}