/* ========================================
   CSS 變數定義 - 所有顏色使用變數，不寫死
   ======================================== */

:root {
    --color-bg-primary:    #ffffff;
    --color-bg-secondary:  #f8f9fa;
    --color-bg-card:       #ffffff;
    --color-text-primary:  #212529;
    --color-text-secondary:#6c757d;
    --color-accent:        #6366f1;
    --color-border:        #dee2e6;

    --color-status-pending:   #6c757d;
    --color-status-queued:    #9e9e9e;
    --color-status-running:   #fd7e14;
    --color-status-done:      #198754;
    --color-status-failed:    #dc3545;
    --color-status-idle:      #20c997;
    --color-status-error:     #dc3545;
    --color-status-warning:   #f59e0b;
    --color-status-revision:  #f59e0b;
    --color-status-reviewing: #7c3aed;
    --color-status-cancelled: #6c757d;
    --color-status-skipped:   #20c997;
    --color-status-needs-intervention: #f59e0b;  /* Stage 43：amber，與 failed 紅色分離 */
    --color-status-paused:    #6c757d;  /* Stage 45：muted grey，與 needs_intervention amber 視覺對比清楚（靜止 vs 警示）*/

    --shadow-card:             0 2px 8px rgba(0, 0, 0, 0.08);
    --radius-card:             8px;
}

html[data-theme="dark"] {
    /* Stage 86 子項 6：Dark Mode baseline = Christ 喜歡的深灰色（取代既有藍紫色 #1a1a2e/#16213e/#0f3460 / VS Code Dark+ 對齊 MudTheme PaletteDark） */
    --color-bg-primary:    #1e1e1e;
    --color-bg-secondary:  #2d2d2d;
    --color-bg-card:       #252525;
    --color-text-primary:  rgba(255, 255, 255, 0.87);
    --color-text-secondary:rgba(255, 255, 255, 0.60);
    --color-accent:        #818cf8;
    --color-border:        rgba(255, 255, 255, 0.15);
    --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ========================================
   基礎
   ======================================== */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ========================================
   Page Header
   ======================================== */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Stage 87 follow-up #6：sticky 改 flex-shrink:0 / 配合 .pa-4 flex column + .page-body overflow scroll 紀律 */
    /* scrollbar 只出現在 .page-body 段（page-header 下方 / 對齊 drawer 三段 layout 紀律）*/
    flex-shrink: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

/* Stage 87 follow-up #6：主內容 page-body 段 — scrollbar 只在這段 / 對齊 drawer nav 三段紀律 */
.page-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* flex item overflow 必要 / 否則 child overflow 撐父高 break flex */
    padding-bottom: 16px;
}

.page-header h2 {
    margin: 0;
}

.page-filters {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ========================================
   Agent Status Cards
   ======================================== */

.agent-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.agent-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 16px;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.agent-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.agent-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.agent-name {
    font-weight: 700;
    font-size: 1.05rem;
}

.agent-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.current-task {
    font-size: 0.85rem;
    color: var(--color-status-running);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-card-footer {
    margin-top: 8px;
    color: var(--color-text-secondary);
}

/* ========================================
   Status Badge
   ======================================== */

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.status-pending   { background: var(--color-status-pending);   }
.status-queued    { background: var(--color-status-queued);    }
.status-running   { background: var(--color-status-running);   }
.status-done      { background: var(--color-status-done);      }
.status-failed    { background: var(--color-status-failed);    }
.status-idle      { background: var(--color-status-idle);      }
.status-error     { background: var(--color-status-error);     }
.status-revision  { background: var(--color-status-revision);  }
.status-reviewing { background: var(--color-status-reviewing); }
.status-cancelled { background: var(--color-status-cancelled); }
.status-skipped   { background: var(--color-status-skipped);   }
.status-needs-intervention { background: var(--color-status-needs-intervention); }
.status-paused    { background: var(--color-status-paused);    }

/* ========================================
   工具類別
   ======================================== */

.cursor-pointer { cursor: pointer; }
.text-muted     { color: var(--color-text-secondary); }

/* ========================================
   Task List Simple (首頁)
   ======================================== */

.task-list-simple {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.task-title {
    flex: 1;
    font-size: 0.9rem;
}

.task-agent {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    width: 60px;
}

/* ========================================
   Login
   ======================================== */

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.login-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-card);
}

.login-card h2 {
    text-align: center;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 16px;
}

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

/* ========================================
   Drawer 內容樣式（MudDrawer 內使用）
   ======================================== */

.drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.drawer-header h4 {
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.drawer-logs {
    padding: 16px;
}

.log-item {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    border-left: 3px solid var(--color-border);
}

.log-done    { border-left-color: var(--color-status-done);    }
.log-failed  { border-left-color: var(--color-status-failed);  }
.log-running { border-left-color: var(--color-status-running); }

.log-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.log-agent {
    font-weight: 600;
    font-size: 0.85rem;
}

.log-step {
    font-size: 0.85rem;
    margin: 4px 0;
}

.log-payload {
    font-size: 0.75rem;
    background: var(--color-bg-secondary);
    padding: 8px;
    border-radius: 4px;
    overflow: auto;
    max-height: 200px;
}

/* ========================================
   System Config Card（原 Agent Setting Card）
   ======================================== */

.system-config-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
}

.system-config-card--warning {
    border-color: var(--color-status-warning) !important;
}

.system-config-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.team-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.trust-level-control {
    margin-bottom: 16px;
}

.agent-setting-actions {
    margin-top: 16px;
}

/* ========================================
   Coming Soon
   ======================================== */

.coming-soon-container {
    display: flex;
    justify-content: center;
    padding-top: 60px;
}

.coming-soon-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 40px;
    max-width: 500px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.coming-soon-label {
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 12px 0;
}

.coming-soon-features {
    text-align: left;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* ========================================
   Utilities
   ======================================== */

.no-data {
    color: var(--color-text-secondary);
    font-style: italic;
    padding: 8px 0;
}

/* ========================================
   Empty State
   ======================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    color: var(--color-text-secondary);
}

.empty-state-icon {
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}

.empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 6px;
}

.empty-state-hint {
    font-size: 0.85rem;
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
}

.btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    transition: opacity 0.15s;
}

.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary   { background: var(--color-accent); color: #fff; }
.btn-secondary { background: var(--color-bg-secondary); border: 1px solid var(--color-border); color: var(--color-text-primary); }

.alert {
    padding: 10px 14px;
    border-radius: 4px;
    margin-top: 12px;
}

.alert-danger  { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }

/* ========================================
   MudBlazor Dark Mode — 覆蓋 CSS 變數
   MainLayout 為 Static SSR，無法透過 MudThemeProvider IsDarkMode 動態切換，
   改由 html[data-theme="dark"] 高優先度 selector 覆寫 --mud-palette-* 變數。
   ======================================== */

html[data-theme="dark"] {
    /* Stage 86 子項 6：對齊 MudTheme PaletteDark 重設計 hex（深灰色系取代藍紫色 / 兩 layer 對齊） */

    /* 文字 */
    --mud-palette-text-primary:    rgba(255, 255, 255, 0.87);
    --mud-palette-text-secondary:  rgba(255, 255, 255, 0.60);
    --mud-palette-text-disabled:   rgba(255, 255, 255, 0.38);

    /* 背景與表面 */
    --mud-palette-background:      #1e1e1e;
    --mud-palette-background-grey: #2d2d2d;
    --mud-palette-surface:         #252525;

    /* 分隔線 */
    --mud-palette-divider:         rgba(255, 255, 255, 0.15);
    --mud-palette-divider-light:   rgba(255, 255, 255, 0.10);

    /* 表格 */
    --mud-palette-table-hover:     rgba(255, 255, 255, 0.08);
    --mud-palette-table-striped:   rgba(255, 255, 255, 0.04);
    --mud-palette-table-lines:     rgba(255, 255, 255, 0.10);

    /* 動作按鈕 */
    --mud-palette-action-default:  rgba(255, 255, 255, 0.54);
    --mud-palette-action-disabled: rgba(255, 255, 255, 0.26);

    /* Overlay */
    --mud-palette-overlay-dark:    rgba(0, 0, 0, 0.5);
    --mud-palette-overlay-light:   rgba(255, 255, 255, 0.06);

    /* Drawer / AppBar */
    --mud-palette-drawer-background: #2d2d2d;
    --mud-palette-drawer-text:       rgba(255, 255, 255, 0.87);
    --mud-palette-drawer-icon:       rgba(255, 255, 255, 0.54);
    --mud-palette-appbar-background: #2d2d2d;
    --mud-palette-appbar-text:       rgba(255, 255, 255, 0.87);
}

/* ========================================
   Stage 86 子項 5：Sidebar hamburger 半透明浮左上 + drawer overlay 模式
   ======================================== */

.sidebar-hamburger-float {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1300;
    opacity: 0.4;
    transition: opacity 0.2s;
    cursor: pointer;
}
.sidebar-hamburger-float:hover { opacity: 1; }

/* Overlay 模式：drawer 浮在內容上 不擠壓 main content（width 對齊 MudDrawer 預設 / 既有 pinned 模式 width） */
.mud-drawer-persistent.mud-drawer--overlay-mode {
    position: fixed !important;
    z-index: 1200;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    width: 260px !important;
    max-width: 260px !important;
}

/* Stage 86 子項 5 follow-up #3：MudDrawer 從 viewport top 0 延伸到底（砍 AppBar 後不留空白） */
.mud-drawer-persistent {
    top: 0 !important;
    height: 100vh !important;
}

/* Stage 86 子項 5 follow-up #4：MudMainContent 從 viewport top 0 延伸（砍 AppBar 後 padding-top 不留 AppBar 高度空白） */
/* Stage 87 follow-up #6：主內容 overflow:hidden / scroll 由 .page-body 段接（對齊 drawer 三段 layout：page-header 固定 + page-body scroll）*/
.mud-main-content {
    padding-top: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Stage 87 follow-up #6：.mud-main-content 直接子 .pa-4 = MainLayout wrapping div / 改 flex column 撐起 page-header + .page-body 兩段 */
.mud-main-content > .pa-4 {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 0 !important; /* .page-body 自帶 padding-bottom 16 / .pa-4 padding-bottom 重複多算 */
}

/* Stage 86 follow-up #2：NavMenu active link icon 跟字一致套 primary color（MudNavLink 預設只 highlight text） */
.mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

/* Stage 86 follow-up #6：MudTooltip popup max-width 限 280px（Inline="false" 後 popup 繼承 anchor width 變超寬 / 限上限避免超出 viewport） */
.mud-tooltip {
    max-width: 280px !important;
}

/* ========================================
   Form Controls
   ======================================== */

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

/* ========================================
   Project Detail（Drawer 內）
   ======================================== */

.project-detail {
    padding: 16px;
    font-size: 0.9rem;
    line-height: 1.8;
}

.project-detail pre {
    background: var(--color-bg-secondary);
    padding: 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    overflow: auto;
}