/* header.css */

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 0 30px;
    height: 64px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 900;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-header-login {
    padding: 8px 20px;
}

.mobile-hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #334155;
}

.header-logo-image-wrap {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}
.header-logo-img {
    height: 40px; /* ヘッダーの高さ64pxに合わせてバランスの良いサイズに調整 */
    width: auto;  /* アスペクト比を維持 */
    display: block;
    object-fit: contain;
}

.app-name-title {
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-size: 22px;
    font-weight: 800; /* Visuを極太にする */
    color: #322152;
    letter-spacing: -0.5px;
}

/* 通知一覧アイテム：サムネイル・ホバー演出・進捗トラック（インラインstyle排除の受け皿） */
.status-thumb-img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.status-row-item {
    cursor: pointer;
    transition: background-color 0.2s;
}

.status-row-item:hover {
    background-color: #f1f5f9;
}

.mini-progress-track.track-empty {
    background-color: #e2e8f0;
}

.proc-percent.text-failed {
    color: #ef4444;
    white-space: nowrap;
}

.proc-percent.text-processing {
    color: #3b82f6;
    white-space: nowrap;
}

.icon-dot-xs {
    font-size: 8px;
    vertical-align: middle;
}

.apps-dropdown-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.apps-dropdown-pane-header h4 {
    margin: 0;
}

.apps-dropdown-today-count {
    font-size: 11px;
    color: #94a3b8;
}

.status-scroll-area-empty {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    padding: 10px;
}

.drawer-nav-item-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding-right: 0;
}

.drawer-nav-item-link-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    flex: 1;
    height: 100%;
}

.drawer-accordion-toggle-btn {
    cursor: pointer;
    padding: 8px 16px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.drawer-accordion-toggle-btn .accordion-icon {
    transition: transform 0.2s;
}

#analysisAccordionContent {
    max-height: 0;
    overflow-y: auto;
    transition: max-height 0.2s ease-out;
    background-color: rgba(0, 0, 0, 0.02);
    padding: 0 8px;
}

.app-name-title::after {
    content: "Sort";
    font-weight: 400; /* Sortをレギュラーウエイトにして細く */
    color: #475569;   /* スレートグレーでコントラストをつける */
    margin-left: -2px; /* 文字間を詰める */
}

.user-profile-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-profile-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-circle.size-md {
    width: 48px;
    height: 48px;
}

.header-user-label {
    display: block;
    font-size: 14px;
    color: #475569;
    font-weight: 500;
}

.header-username-text {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

.apps-menu-container {
    position: relative;
    padding: 8px;
}

/* 9ドットトリガーの見切れ徹底防止定義 */
.apps-trigger {
    font-size: 20px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background-color 0.15s;
}

.apps-trigger i {
    display: inline-block;
    line-height: 1;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: var(--icon-md);
}

.apps-menu-container:hover .apps-trigger {
    background-color: #f1f5f9;
}

.apps-dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    width: 540px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);
    padding: 24px;
    display: none;
}

.apps-menu-container:hover .apps-dropdown {
    display: block;
}

.dropdown-flex-layout {
    display: flex;
    gap: 24px;
}

.dropdown-left-status-pane {
    flex: 1.2;
    border-right: 1px solid #f1f5f9;
    padding-right: 20px;
}

.pane-sub-title {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.status-scroll-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}

.proc-fname {
    color: #334155;
    font-weight: 500;
    width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-progress-track {
    flex: 1;
    height: 6px;
    background-color: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.mini-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.mini-bar-fill.bg-green { background-color: #10b981; }
.mini-bar-fill.bg-purple { background-color: #8b5cf6; }

.proc-percent {
    color: #64748b;
    font-weight: 600;
    width: 35px;
    text-align: right;
}

.dropdown-right-links-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dropdown-user-identity-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.identity-username {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.dropdown-navigation-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #475569;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
}

.nav-item-link i {
    font-size: var(--icon-md);
    color: #64748b;
    width: 20px;
    text-align: center;
}

.nav-item-link:hover {
    background-color: #f8fafc;
    color: #1e293b;
}

.nav-item-link.active {
    background-color: #ede9fe;
    color: #322152;
    font-weight: 700;
    box-shadow: inset 3px 0 0 #6d28d9;
}

.nav-item-link.active i {
    color: #6d28d9;
}

/* PC大画面時はオーバーレイ自体を完全隠蔽して干渉を排除 */
.mobile-drawer-overlay {
    display: none;
}

/* ==========================================
   スマートフォンレスポンシブ表示制御設定
   ========================================== */
@media (max-width: 800px) {
    .mobile-hamburger {
        display: block;
    }

    .header-user-label {
        display: block !important;
        font-size: 14px;
        color: #475569;
        white-space: nowrap;
    }

    .apps-menu-container {
        display: none;
    }

    /* 極端に狭い画面幅でも右側の管理者バッジ・ユーザー名・アバターが
       折り返して崩れないよう、必要に応じて縮小・省略する */
    .app-header {
        padding: 0 12px;
    }

    .header-right {
        gap: 8px;
        min-width: 0;
    }

    .header-user-label {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 360px) {
    .header-user-label {
        display: none !important;
    }
}

/* 狭い画面では優先度の低い要素から順に間引く：バッジ→アバターの順 */
.header-right .header-admin-badge-left.is-collision-hidden {
    display: none !important;
}
.drawer-header .menu-admin-badge-right.is-collision-hidden {
    display: none !important;
}
.drawer-header .drawer-username.is-collision-hidden {
    display: none !important;
}
.header-right .header-user-icon-wrap.is-collision-hidden {
    display: none !important;
}

@media (max-width: 800px) {
    .header-admin-badge-left {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* アニメーション対応版ドロワーオーバーレイ基盤 */
    .mobile-drawer-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 2000;
        
        /* 初期状態：透明かつクリック不可 */
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;

        height:100vh; 
        height:100dvh;
    }

    /* 開いた状態：フェードイン */
    .mobile-drawer-overlay.active {
        visibility: visible;
        opacity: 1;
    }

    /* アニメーション対応版メニュー筐体 */
    .mobile-drawer-menu {
        position: absolute;
        top: 0;
        left: 0;
        width: min(290px, 85vw);
        box-sizing: border-box;
        height: 100%;
        background-color: #f4f7fe;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        
        /* 初期状態：左側に完全に隠す */
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 開いた状態：スライドイン */
    .mobile-drawer-overlay.active .mobile-drawer-menu {
        transform: translateX(0);
    }

    .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px 20px;
    }

    .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px 20px;
        gap: 8px;
    }

    .drawer-user-block {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1;
    }

    .drawer-user-identity-tap {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        flex: 1;
        text-decoration: none;
        color: inherit;
    }

    .drawer-username {
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
        min-width: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .drawer-close-btn {
        background: none;
        border: none;
        font-size: 24px;
        color: #94a3b8;
        cursor: pointer;
    }

    .drawer-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 12px;
    }

    .drawer-nav-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .drawer-nav-item {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #322152;
        padding: 14px 16px;
        border-radius: 12px;
        font-size: 18px;
        font-weight: 600;
        gap: 16px;
    }
    .drawer-nav-item i {
        font-size: var(--icon-lg);
        width: 24px;
        text-align: center;
        color: #322152;
    }

    .drawer-nav-item.active {
        background-color: var(--c-accent-tint-strong, #ede9fe);
        box-shadow: inset 3px 0 0 var(--c-accent, #6d28d9);
        color: #322152;
    }
    .drawer-nav-item.active i {
        color: var(--c-accent, #6d28d9);
    }

    .drawer-badge-green {
        background-color: #22c55e;
        color: #ffffff;
        font-size: 12px;
        font-weight: bold;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    .drawer-status-sub-panel {
        display: flex;
        flex-direction: column;
        padding-left: 56px;
        margin-top: 4px;
        margin-bottom: 12px;
        gap: 10px;
    }

    .drawer-status-item {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #94a3b8;
        gap: 10px;
        position: relative;
    }

    .drawer-status-thumb {
        font-size: 14px;
        color: #cbd5e1;
    }

    .drawer-proc-name {
        font-weight: 500;
    }

    .drawer-proc-percent {
        font-weight: 600;
        margin-left: auto;
        padding-right: 16px;
    }

    .drawer-proc-percent.text-green {
        color: #22c55e;
    }

    .drawer-vertical-indicator {
        position: absolute;
        right: 4px;
        height: 14px;
        width: 2px;
    }

    .drawer-vertical-indicator.border-green {
        background-color: #22c55e;
    }

    .drawer-status-more-link {
        font-size: 13px;
        color: #3b82f6;
        text-decoration: underline;
        font-weight: 500;
        margin-top: 2px;
    }

    .drawer-footer-line {
        height: 1px;
        background-color: #e2e8f0;
        margin: 20px 16px;
    }

    .drawer-logout-btn {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #322152;
        padding: 14px 16px;
        font-size: 18px;
        font-weight: 600;
        gap: 16px;
        margin-top: auto;
        margin-bottom: 24px;
    }

    .drawer-logout-btn i {
        font-size: var(--icon-lg);
        color: #322152;
    }
    .header-logo-img {
        height: 34px; /* モバイル画面用に少し縮小 */
    }
}

.header-user-link-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
}

.dropdown-user-identity-box, .drawer-user-identity-tap {
    text-decoration: none;
    color: inherit;
}

.drawer-user-identity-tap:hover .drawer-username {
    color: var(--c-accent-strong, #6d28d9);
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .drawer-user-identity-tap:hover .avatar-common,
    .drawer-user-identity-tap:hover .user-profile-circle {
        box-shadow: 0 0 0 2px var(--c-accent-strong, #6d28d9);
    }
}

.dropdown-user-identity-box:hover .identity-username {
    color: var(--c-accent-strong, #6d28d9);
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .dropdown-user-identity-box:hover .avatar-common,
    .dropdown-user-identity-box:hover .user-profile-circle {
        box-shadow: 0 0 0 2px var(--c-accent-strong, #6d28d9);
    }
}

/* PC版のスクロールエリア。横方向は本来はみ出さない設計だが、ファイル名等が
   想定より長い場合に備えて overflow-x: hidden を明示し、太い横スクロールバー
   が出ないようにする。縦スクロールバー分の余白を right の padding で確保し、
   右端の % 表示がスクロールバーの下に潜り込まないようにする */
.status-scroll-area {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 250px; /* 必要に応じて調整 */
    padding-right: 10px;
}

/* スマホ版のスクロールエリア */
.drawer-status-sub-panel {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px; /* 必要に応じて調整 */
}

/* カスタムスクロールバー（モダンブラウザ用）。縦横どちらのスクロールバーにも
   effective になるよう width/height 両方指定しておく */
.status-scroll-area::-webkit-scrollbar,
.drawer-status-sub-panel::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.status-scroll-area::-webkit-scrollbar-thumb,
.drawer-status-sub-panel::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}
.app-name-admin-pill {
    font-size: 11px;
    background-color: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    color: #475569;
    font-weight: bold;
    border: 1px solid #cbd5e1;
    display: inline-block;
}

/* 色は base.css の .badge-admin に集約。ここはヘッダ内のサイズ/位置差分のみ */
.header-admin-badge-left {
    padding: 2px 8px !important;
    font-size: 11px !important;
    margin-right: -4px;
}

.menu-admin-badge-right {
    padding: 2px 8px;
    font-size: 11px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

.nav-item-link.sys-link-admin,
.drawer-nav-item.sys-link-admin {
    color: #10b981 !important;
}

.nav-item-link.sys-link-admin i,
.drawer-nav-item.sys-link-admin i {
    color: #10b981 !important;
}

.nav-item-link.sys-link-admin.active,
.drawer-nav-item.sys-link-admin.active {
    background-color: #e6f9ed !important;
    color: #1f9254 !important;
    font-weight: 600;
}

.nav-item-link.sys-link-admin.active i,
.drawer-nav-item.sys-link-admin.active i {
    color: #1f9254 !important;
}

/* ロゴエリア全体の調整 */
.header-logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* アイコン筐体のブラッシュアップ */
.header-logo-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #322152 0%, #322152 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 18px;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(50, 33, 82, 0.2);
}

/* アプリ名テキスト（ウエイトの掛け合わせ） */
.header-app-name {
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-size: 22px;
    font-weight: 800; /* 全体のベースを太く */
    color: #322152;
    letter-spacing: -0.5px;
}

/* 後半の「Sort」だけをスマートに細く見せる演出 */
.header-app-name::after {
    content: "Sort";
    font-weight: 400; /* レギュラーウエイト */
    color: #475569;   /* スレートグレーでコントラストをつける */
    margin-left: -4px; /* 文字間を詰める */
}