/* =========================================================================
   Orbit 設計系統（Linear 深色風格）
   色彩均依 WCAG 對比度設計，主要文字與背景對比 >= 4.5:1
   ========================================================================= */

/* ---------- 設計變數 ---------- */
:root {
    /* 背景層級 */
    --bg-app: #0E0F11;          /* 應用程式底色 */
    --bg-sidebar: #16171B;      /* 側邊導覽底色 */
    --bg-raised: #1E1F24;       /* 卡片 / 表單底色 */
    --bg-hover: #26272D;        /* 滑鼠懸停底色 */
    --bg-active: #2E2F36;       /* 選取狀態底色 */

    /* 邊框與分隔線 */
    --border: #2C2D33;
    --border-strong: #3A3B43;

    /* 文字（對比度 >= 4.5:1） */
    --text-primary: #F7F8F8;
    --text-secondary: #ADAFBB;
    --text-muted: #7E828F;

    /* 主色與功能色 */
    --primary: #5E6AD2;
    --primary-hover: #6E7AE0;
    --accent: #5E6AD2;
    --success: #2FA36B;
    --danger: #D64550;
    --warning: #C9A227;
    --info: #5B9BD5;

    /* 狀態色（Linear 風格） */
    --state-backlog: #8A94A6;
    --state-todo: #5E6AD2;
    --state-progress: #D9A62E;
    --state-done: #4CB782;
    --state-cancelled: #EF4444;

    /* 圓角與間距 */
    --radius: 6px;
    --radius-lg: 10px;
    --radius-sm: 4px;
    --spacing: 8px;

    /* 字體 */
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---------- Reset 與基礎 ---------- */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-app);
}

a {
    color: var(--primary-hover);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5 {
    margin: 0 0 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ---------- 認證頁（登入 / 註冊等未登入頁面共用） ---------- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(1200px 800px at 15% -10%, rgba(94, 106, 210, 0.18), transparent 60%),
        radial-gradient(1000px 700px at 110% 110%, rgba(94, 106, 210, 0.12), transparent 55%),
        var(--bg-app);
}

.auth-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
}

/* 右側表單面板：置中卡片 */
.auth-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

/* 置中單一卡片（預設；大型螢幕可切換為 marketing 雙欄） */
.auth-card {
    width: 100%;
    max-width: 440px;
    padding: 36px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 10px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

/* 品牌標題列 */
.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.auth-brand .brand-logo {
    font-size: 26px;
    color: var(--primary-hover);
    flex-shrink: 0;
}

.auth-brand .brand-text {
    font-size: 20px;
    font-weight: 700;
}

/* 品牌文字置中（Login 頁使用，與 auth-brand 並存） */
.auth-brand.text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

/* 標題與副標題 */
.auth-title {
    margin: 20px 0 6px;
    font-size: 21px;
}

.auth-sub {
    margin: 0 0 20px;
    color: var(--text-secondary);
    font-size: 14.5px;
}

/* Marketing 雙欄版面：大型螢幕顯示左側品牌區 */
.auth-marketing {
    display: none;
}

@media (min-width: 992px) {
    .auth-shell {
        flex-direction: row-reverse;
    }
    .auth-marketing {
        flex: 1.1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 60px 80px;
    }
    .auth-panel {
        flex: 0.9;
    }
    .auth-card {
        max-width: 460px;
    }
}

.auth-desc {
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 14.5px;
}

/* ---------- 主版面外殼 ---------- */
.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* 側邊導覽 */
.sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    padding: 12px 10px;
    overflow-y: auto;
}

.sidebar-top {
    padding: 4px 6px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    text-decoration: none;
}

.brand .brand-text {
    font-size: 17px;
    font-weight: 700;
}

.org-name {
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 組織切換器（側欄） ---------- */
.org-switcher {
    position: relative;
    margin-top: 10px;
}

.org-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.org-trigger:hover {
    background: var(--bg-raised);
    border-color: var(--border-strong);
}

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

.org-caret {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.org-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    min-width: 230px;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 100;
    overflow: hidden;
}

.org-option-icon {
    display: inline-block;
    width: 20px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

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

.dropdown-item.active {
    background: var(--bg-hover);
    color: var(--accent);
    font-weight: 600;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ---------- 系統首頁（Landing，對標 Linear 首頁） ---------- */
.landing {
    background: #08090d;
    color: #f7f8f8;
    min-height: 100vh;
}

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    background: rgba(8, 9, 13, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-nav .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f7f8f8;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.landing-nav .brand-logo {
    font-size: 24px;
    color: #5e6ad2;
}

.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.landing-hero {
    position: relative;
    padding: 96px 40px 48px;
    text-align: center;
    overflow: hidden;
}

.landing-hero::before {
    content: "";
    position: absolute;
    inset: -10% -20% auto;
    height: 90%;
    background: radial-gradient(600px 300px at 50% 30%, rgba(94, 106, 210, 0.35), transparent 70%);
    pointer-events: none;
}

.landing-hero h1 {
    position: relative;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: 0 auto 20px;
    max-width: 900px;
}

.landing-hero h1 .gradient-text {
    background: linear-gradient(100deg, #8b95f5 0%, #5e6ad2 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.landing-hero .hero-sub {
    position: relative;
    font-size: 18px;
    line-height: 1.6;
    color: #9ca3af;
    max-width: 620px;
    margin: 0 auto 32px;
}

.landing-hero-actions {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.landing-cta {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.landing-cta:hover {
    transform: translateY(-1px);
}

.landing-cta-primary {
    background: #5e6ad2;
    color: #fff;
    box-shadow: 0 4px 20px rgba(94, 106, 210, 0.35);
}

.landing-cta-primary:hover {
    box-shadow: 0 6px 28px rgba(94, 106, 210, 0.5);
}

.landing-cta-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f7f8f8;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.landing-hero .hero-trust {
    position: relative;
    margin-top: 40px;
    font-size: 13px;
    color: #6b7280;
}

.landing-mock {
    position: relative;
    max-width: 1060px;
    margin: 56px auto 0;
    padding: 0 40px;
}

.landing-mock .mock-frame {
    position: relative;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.mock-board {
    display: flex;
    gap: 16px;
    padding: 24px;
    min-height: 260px;
}

.mock-column {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.mock-column-title {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mock-card {
    background: #14151b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #e5e7eb;
}

.mock-card .mock-id {
    color: #6b7280;
    font-size: 11px;
    margin-bottom: 4px;
}

.mock-card .mock-tag {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

.landing-features {
    padding: 88px 40px;
    max-width: 1120px;
    margin: 0 auto;
}

.landing-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.landing-feature-card {
    padding: 28px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.landing-feature-card:hover {
    border-color: rgba(94, 106, 210, 0.5);
    transform: translateY(-2px);
}

.landing-feature-card .feature-icon {
    font-size: 26px;
    margin-bottom: 14px;
}

.landing-feature-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}

.landing-feature-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #9ca3af;
    margin: 0;
}

.landing-section-title {
    text-align: center;
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 40px;
}

.landing-cta-band {
    padding: 80px 40px;
    text-align: center;
}

.landing-cta-band h2 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.landing-cta-band p {
    color: #9ca3af;
    font-size: 16px;
    margin: 0 0 28px;
}

.landing-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #6b7280;
    font-size: 13px;
}

@media (max-width: 768px) {
    .landing-hero { padding: 64px 20px 32px; }
    .landing-nav { padding: 14px 20px; }
    .landing-mock { padding: 0 16px; margin-top: 40px; }
    .landing-features { padding: 56px 20px; }
    .landing-cta-band { padding: 56px 20px; }
    .mock-board { flex-direction: column; }
}

/* ---------- 組織邀請區塊（設定頁） ---------- */
.invite-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.invite-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.invite-link-box {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--bg-hover);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

.invite-link-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.invite-link-copy {
    display: flex;
    gap: 8px;
}

.invite-link-copy .form-control {
    flex: 1;
}

/* ---------- 快速啟用（Quick Start） ---------- */
.onboarding {
    max-width: 720px;
    margin: 0 auto;
}

.onboarding-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

.onboarding-step-dot {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
}

.onboarding-step-dot.done {
    background: var(--accent);
}

.onboarding-card {
    padding: 28px;
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.onboarding-card .check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 14px;
}

.onboarding-card.completed .check {
    background: var(--accent);
    color: #fff;
}

.onboarding-card h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.onboarding-card p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item,
.team-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 15px;
    text-decoration: none;
}

.nav-item:hover,
.team-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.nav-item.active {
    background: var(--bg-active);
    color: var(--text-primary);
    font-weight: 600;
}

.sidebar-section {
    margin-top: 14px;
}

.sidebar-section-title {
    padding: 0 10px 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.team-icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

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

.empty-hint {
    padding: 4px 10px;
    font-size: 13.5px;
    color: var(--text-muted);
}

/* 主要內容 */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-app);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    flex-shrink: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
}

.topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* ---------- 按鈕 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.btn:hover {
    background: var(--bg-hover);
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #FFFFFF;
}

.btn-danger:hover {
    background: #E25660;
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-sm {
    padding: 4px 10px;
    font-size: 14px;
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---------- 表單 ---------- */
.orbit-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-app);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    outline: none;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.25);
}

.form-control::placeholder {
    color: var(--text-muted);
}

select.form-control {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
        linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
}

textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.form-check-inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.form-check-input {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
}

.form-check-label {
    font-size: 14.5px;
    color: var(--text-secondary);
}

.text-danger {
    color: #FF8B93;
    font-size: 13.5px;
}

.form-section-title {
    margin: 6px 0 0;
    padding-bottom: 6px;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

/* ---------- 提示（Alert） ---------- */
.orbit-alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    margin-bottom: 14px;
}

.alert-danger {
    background: rgba(214, 69, 80, 0.12);
    border: 1px solid rgba(214, 69, 80, 0.45);
    color: #FFB3B8;
}

.alert-success {
    background: rgba(47, 163, 107, 0.12);
    border: 1px solid rgba(47, 163, 107, 0.45);
    color: #9FE8C0;
}

/* 驗證錯誤摘要清單 */
.validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

/* ---------- 下拉選單（使用者） ---------- */
.user-menu {
    position: relative;
}

.user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 15px;
}

.user-trigger:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 220px;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 100;
    overflow: hidden;
}

.dropdown-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.dropdown-name {
    font-size: 15px;
    font-weight: 600;
}

.dropdown-email {
    font-size: 13.5px;
    color: var(--text-muted);
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

/* ---------- 空狀態 ---------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.empty-icon {
    font-size: 42px;
}

/* ---------- 通知 Toast ---------- */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.orbit-toast {
    min-width: 220px;
    max-width: 360px;
    padding: 11px 16px;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s;
}

.orbit-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.orbit-toast.success {
    border-left-color: var(--success);
}

.orbit-toast.error {
    border-left-color: var(--danger);
}

/* ---------- 語言切換 ---------- */
.lang-switch {
    display: inline-flex;
}

/* ---------- 捲軸 ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4A4B54;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- 儀表板 ---------- */
.dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.page-title {
    margin: 0 0 4px;
    font-size: 23px;
}

.section-title {
    margin: 24px 0 12px;
    font-size: 16px;
    font-weight: 600;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.stat-card {
    padding: 16px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stat-value {
    font-size: 29px;
    font-weight: 700;
}

.stat-label {
    margin-top: 2px;
    font-size: 14px;
    color: var(--text-secondary);
}

.team-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.team-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
}

.team-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    text-decoration: none;
}

.team-card .team-icon {
    font-size: 21px;
}

.team-card-info {
    min-width: 0;
}

.team-card-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-card-key {
    font-size: 13.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ---------- 通用工具類 ---------- */
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.flex-1 { flex: 1; }
.w-100 { width: 100%; }

/* ---------- 團隊列表頁（Team Summary 卡片） ---------- */
.ts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.ts-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.ts-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.ts-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ts-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    border-radius: var(--radius);
    color: #fff;
}

.ts-card-info {
    min-width: 0;
}

.ts-card-name {
    font-size: 15.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-card-key {
    font-size: 13.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.ts-card-desc {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ts-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ts-chip {
    font-size: 13.5px;
    color: var(--text-secondary);
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
}

.ts-stats {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.ts-stat {
    font-size: 13.5px;
    font-weight: 600;
}

/* 專案卡片（列表頁）：狀態文字 / 進度條 / 底部建立者與操作 */
.project-card {
    position: relative;
}

/* 已封存的專案卡片整張淡出顯示 */
.project-card.card-inactive {
    opacity: 0.55;
}

/* 專案狀態文字（依 data-status 呈現代表色） */
.project-status {
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 狀態代表色：規劃中(0) 灰 / 進行中(1) 藍 / 暫停(2) 黃 / 已完成(3) 綠 / 已取消(4) 紅 */
.project-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #95A2B3;
}

.project-status[data-status="1"]::before { background: #4A9DFF; }
.project-status[data-status="2"]::before { background: #F2C94C; }
.project-status[data-status="3"]::before { background: #3ECF8E; }
.project-status[data-status="4"]::before { background: #FF6B6B; }

/* 專案進度區塊（進度條 + 統計文字） */
.project-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 進度條軌道 */
.project-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* 進度條填充（已完成 Issue 佔比，綠色） */
.project-progress-fill {
    height: 100%;
    background: #3ECF8E;
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* 專案卡片底部：建立者 + 管理員操作 */
.project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
}

/* 顏色選擇器（建立團隊頁） */
input.form-control.color-picker {
    height: 40px;
    padding: 4px;
    cursor: pointer;
}

/* ────────── Issue 列表頁 ────────── */
/* 小尺寸頭像（列表負責人欄位） */
.avatar-sm {
    width: 22px;
    height: 22px;
    font-size: 13.5px;
    border-radius: 50%;
}

/* 團隊過濾標籤列 */
.issue-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* 單一團隊過濾標籤 */
.issue-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.issue-tab:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-hover);
}

/* 目前選中的過濾標籤 */
.issue-tab.active {
    color: var(--text-primary);
    background: var(--bg-active);
    border-color: var(--border-strong);
}

/* 過濾標籤中的團隊圖示 */
.issue-tab-icon {
    font-size: 13.5px;
}

/* 表格容器（圓角 + 邊框） */
.issue-table-wrap {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Issue 列表表格 */
.issue-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.issue-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg-app);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.issue-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

.issue-table tbody tr:last-child td {
    border-bottom: none;
}

/* 列表列 hover 高亮 */
.issue-row {
    cursor: default;
    transition: background 0.12s;
}

.issue-row:hover {
    background: var(--bg-hover);
}

/* 欄位寬度分配 */
.col-id { width: 13%; }
.col-title { width: 40%; }
.col-status { width: 14%; }
.col-priority { width: 12%; }
.col-assignee { width: 15%; }
.col-due { width: 12%; }

/* 識別碼（等寬字體 + 團隊圖示） */
.issue-identifier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-muted);
}

/* 識別碼前的團隊圖示 */
.issue-team-icon {
    font-size: 14.5px;
}

/* Issue 標題（主文字，可換行） */
.issue-title {
    color: var(--text-primary);
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
}

/* 工作流狀態徽章（底色淡、文字與邊框為狀態色） */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid;
}

/* 優先級標籤配色（依優先級） */
.priority-tag {
    display: inline-flex;
    padding: 2px 10px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 999px;
}

.priority-urgent { color: #F87171; background: rgba(239, 68, 68, 0.16); }
.priority-high { color: #FBBF24; background: rgba(217, 166, 46, 0.16); }
.priority-medium { color: #818CF8; background: rgba(94, 106, 210, 0.18); }
.priority-low { color: #93C5FD; background: rgba(59, 130, 246, 0.16); }

/* 負責人欄位（頭像 + 名稱） */
.assignee-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.assignee-name {
    color: var(--text-primary);
    font-size: 14px;
}

/* 到期日：逾期紅字 / 一般 */
.due-overdue {
    color: #F87171;
    font-weight: 600;
}

.due-normal {
    color: var(--text-secondary);
}

/* ────────── Issue 建立/編輯頁 ────────── */
/* 大型輸入框（標題、描述） */
.form-control-lg {
    font-size: 16px;
    padding: 10px 14px;
}

/* Issue 表單（垂直排列） */
.issue-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 雙欄版面：左欄內容 + 右欄屬性側欄 */
.issue-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

/* 左欄（標題與描述） */
.issue-form-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* 右欄（屬性側欄，固定寬度） */
.issue-form-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: sticky;
    top: 16px;
}

/* 表單操作列（送出/取消按鈕） */
.issue-form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 窄螢幕時側欄改為單欄疊放 */
@media (max-width: 900px) {
    .issue-form-layout {
        grid-template-columns: 1fr;
    }

    .issue-form-side {
        position: static;
    }
}

/* ────────── Issue 詳情頁 ────────── */
/* 列表標題連結（hover 顯示底線） */
.issue-title-link {
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
}

.issue-title-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* 詳情頁雙欄版面 */
.issue-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

/* 左欄（標題 + 內容） */
.issue-detail-main {
    min-width: 0;
}

/* 標題列（識別碼徽章 + 大標題） */
.issue-detail-head {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

/* 識別碼（狀態色點 + 等寬字體） */
.issue-detail-id {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 14.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* 狀態色點 */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* 詳情頁大標題 */
.issue-detail-title {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    color: var(--text-primary);
}

/* 內容區 */
.issue-detail-body {
    font-size: 15px;
    line-height: 1.7;
}

/* 屬性側欄 */
.issue-detail-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: sticky;
    top: 16px;
}

/* 側欄單一屬性列 */
.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14.5px;
}

/* 屬性名稱 */
.detail-label {
    color: var(--text-muted);
    font-size: 13.5px;
}

/* 等寬字體值（時間等） */
.detail-mono {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary);
}

/* 評論區塊（詳情頁，位於描述下方） */
.comments-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

/* 評論區塊標題（含評論數量） */
.comments-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

/* 新增留言表單 */
.comment-form {
    margin-bottom: 20px;
}

/* 留言輸入框（深色背景、與整體設計一致） */
.comment-input {
    background: var(--bg-raised);
    border-color: var(--border);
    color: var(--text-primary);
    resize: vertical;
}

/* 表單送出列（按鈕靠右） */
.comment-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* 無評論空狀態 */
.comments-empty {
    font-size: 14.5px;
    padding: 12px 0;
}

/* 評論清單（由上而下排列） */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 單則評論（頭像 + 內容橫向排列） */
.comment-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* 評論內容容器 */
.comment-content {
    flex: 1;
    min-width: 0;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
}

/* 留言者與時間列 */
.comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

/* 留言者名稱 */
.comment-author {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 留言時間 */
.comment-time {
    font-size: 13.5px;
    color: var(--text-muted);
}

/* 標籤管理頁（Labels）版面：左欄建立表單 + 右欄標籤清單 */
.labels-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}

/* 左欄建立表單容器 */
.labels-create {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

/* 區塊小標題 */
.labels-section-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

/* 顏色選擇列（色票 + 文字輸入並排） */
.color-picker-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 色票選擇器 */
.color-picker {
    width: 40px;
    height: 38px;
    padding: 4px;
    background: var(--bg-input, var(--bg-elevated));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* 色碼文字輸入 */
.color-text {
    flex: 1;
    font-family: var(--font-mono);
}

/* 標籤清單表格容器 */
.labels-list {
    min-width: 0;
}

/* 標籤表格 */
.labels-table {
    width: 100%;
}

/* 停用的標籤整列淡出 */
.row-inactive {
    opacity: 0.5;
}

/* 標籤晶片（貼在 Issue 與管理清單上） */
.label-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid;
    white-space: nowrap;
}

/* 標籤色點 */
.label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 標籤狀態徽章：啟用中 */
.status-badge.status-active {
    color: var(--success, #34D399);
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.4);
}

/* 標籤狀態徽章：已停用 */
.status-badge.status-inactive {
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-color: var(--border);
}

/* 表格操作列（內聯表單） */
.table-actions {
    text-align: right;
    white-space: nowrap;
}

/* 內聯表單（按鈕直接送出） */
.inline-form {
    display: inline;
}

/* 小尺寸響應：標籤管理頁單欄 */
@media (max-width: 900px) {
    .labels-layout {
        grid-template-columns: 1fr;
    }
}

/* 窄螢幕時側欄改為單欄疊放 */
@media (max-width: 900px) {
    .issue-detail-layout {
        grid-template-columns: 1fr;
    }

    .issue-detail-side {
        position: static;
    }
}

/* ────────── Markdown 內容渲染 ────────── */
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin: 1.2em 0 0.5em;
    line-height: 1.4;
    color: var(--text-primary);
}

.markdown-body h1 { font-size: 21px; }
.markdown-body h2 { font-size: 18px; }
.markdown-body h3 { font-size: 16px; }

.markdown-body p {
    margin: 0.6em 0;
}

.markdown-body ul, .markdown-body ol {
    margin: 0.6em 0;
    padding-left: 1.6em;
}

.markdown-body li {
    margin: 0.2em 0;
}

.markdown-body blockquote {
    margin: 0.8em 0;
    padding: 0.4em 1em;
    border-left: 3px solid var(--border-strong);
    color: var(--text-secondary);
    background: var(--bg-hover);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.markdown-body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-hover);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

.markdown-body pre {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    overflow-x: auto;
}

.markdown-body pre code {
    background: none;
    padding: 0;
}

.markdown-body a {
    color: var(--accent);
}

.markdown-body table {
    border-collapse: collapse;
    margin: 0.8em 0;
    font-size: 14.5px;
}

.markdown-body th, .markdown-body td {
    border: 1px solid var(--border);
    padding: 6px 12px;
}

.markdown-body th {
    background: var(--bg-hover);
}

/* ────────── Issue 列表篩選工具列（Linear 風格） ────────── */
/* 篩選列：搜尋框 + 下拉 + 按鈕，水平排列 */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* 搜尋框容器 */
.filter-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 200px;
}

/* 搜尋圖示 */
.filter-search-icon {
    position: absolute;
    left: 10px;
    font-size: 13.5px;
    opacity: 0.6;
    pointer-events: none;
}

/* 搜尋輸入框 */
.filter-search-input {
    width: 100%;
    padding: 7px 12px 7px 30px;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.15);
}

/* 篩選下拉（compact） */
.filter-select {
    padding: 7px 10px;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    max-width: 160px;
}

.filter-select:focus {
    border-color: var(--accent);
}

/* 清除篩選按鈕 */
.filter-clear {
    color: var(--text-secondary);
}

/* ────────── 看板頁 ────────── */
/* 拖曳操作提示 */
.drag-hint {
    font-size: 14px;
    color: var(--text-secondary);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
}

/* 看板容器（橫向捲動，不換行） */
.board-container {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
    min-height: 60vh;
}

/* 單一狀態欄 */
.board-column {
    flex: 0 0 280px;
    min-height: 100%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, background 0.15s;
}

/* 拖曳放置目標高亮 */
.board-column.drop-target {
    border-color: var(--accent);
    background: var(--bg-active);
}

/* 欄頭 */
.board-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

/* 欄標題（狀態色點 + 名稱） */
.board-column-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 欄內卡片數量徽章 */
.board-column-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-hover);
    border-radius: 999px;
    padding: 2px 9px;
}

/* 卡片清單（垂直排列，可捲動） */
.board-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    flex: 1;
}

/* 空欄提示 */
.board-empty-slot {
    font-size: 13.5px;
    color: var(--text-muted);
    text-align: center;
    padding: 24px 0;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

/* 單一 Issue 卡片 */
.board-card {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow 0.12s, border-color 0.12s, opacity 0.12s;
}

.board-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 拖曳中的卡片（半透明 + 陰影） */
.board-card.dragging {
    opacity: 0.45;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 卡片頂部列（識別碼 + 優先級） */
.board-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* 卡片識別碼（等寬字體） */
.board-card-id {
    font-family: var(--font-mono);
    font-size: 14.5px;
    color: var(--text-muted);
}

/* 卡片標題（連結詳情頁） */
.board-card-title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.board-card-title:hover {
    color: var(--accent);
}

/* 卡片標籤列（Issue 已貼的標籤晶片，可換行） */
.board-card-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

/* 卡片標籤晶片縮小版 */
.board-card-labels .label-chip {
    padding: 1px 8px;
    font-size: 14px;
}

/* 詳情頁標題下方標籤列 */
.label-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* 標籤多選清單（Issue 表單：勾選框 + 標籤晶片） */
.label-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 標籤多選項（隱藏原生勾選框，改以晶片樣式呈現勾選狀態） */
.label-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* 標籤多選的原生勾選框（隱藏但保留可點擊區域，改用 accent-color 顯示勾選色） */
.label-checkbox input[type="checkbox"] {
    accent-color: var(--accent, #5E6AD2);
    cursor: pointer;
    flex-shrink: 0;
}

/* 標籤多選項的晶片：預設較淡，勾選時加深邊框並套用背景色 */
.label-checkbox .label-chip {
    transition: box-shadow 0.15s ease;
}

.label-checkbox input[type="checkbox"]:checked + .label-chip {
    box-shadow: 0 0 0 1px currentColor inset;
}

/* 卡片底部列（負責人頭像 + 到期日） */
.board-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

/* ────────── 設定頁（組織設定 / 使用者管理） ────────── */
/* 設定卡片：固定最大寬度並取消 hover 提亮（非卡片網格） */
.settings-card {
    max-width: 860px;
    margin-bottom: 16px;
}

.settings-card:hover {
    background: var(--bg-raised);
    border-color: var(--border);
}

/* 卡片標題（設定區塊） */
.ts-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 設定子頁籤列（組織設定 / 使用者管理切換） */
.settings-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* 設定子頁籤 */
.settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 14.5px;
    color: var(--text-secondary);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.settings-tab:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* 目前所在設定子頁籤（強調顯示） */
.settings-tab.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--bg-active);
}

/* 成員欄位：頭像 + 名稱水平排列 */
.member-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 成員名稱（粗體） */
.member-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 加入成員表單：輸入框與按鈕水平排列 */
.add-member-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.add-member-form .form-group {
    flex: 1;
    min-width: 240px;
    margin-bottom: 0;
}

/* 角色調整下拉（內嵌於表格） */
.role-form {
    display: inline-block;
    vertical-align: middle;
}

/* 紅色文字按鈕（停用/移除等危險操作） */
.btn-danger-text {
    color: #EF4444 !important;
}

.btn-danger-text:hover {
    background: rgba(239, 68, 68, 0.12) !important;
}

/* 停用使用者列：降低透明度 */
.row-inactive {
    opacity: 0.6;
}

/* ────────── 子任務（詳情頁）與封存 ────────── */
/* 子任務區塊（詳情頁內容區下方） */
.subtasks-section {
    margin-top: 26px;
}

/* 子任務清單容器 */
.subtasks-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 單一子任務列：勾選框 + 內容 + 操作按鈕水平排列 */
.subtask-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
}

/* 已完成子任務：標題與識別碼淡化並刪除線 */
.subtask-done .subtask-title {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.subtask-done .subtask-check {
    color: #fff;
}

/* 子任務勾選框：圓形按鈕，依狀態顏色顯示 */
.subtask-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

.subtask-check:hover {
    opacity: 0.8;
}

/* 子任務內容（標題 + 識別碼） */
.subtask-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

/* 子任務標題（單行省略） */
.subtask-title {
    font-size: 15px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 子任務識別碼（次要文字） */
.subtask-meta {
    font-size: 13.5px;
}

/* 新增子任務表單（輸入框 + 按鈕水平排列） */
.subtask-add-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.subtask-add-form .form-control {
    flex: 1;
    min-width: 0;
}

.subtask-add-form .text-danger {
    display: none;
}

/* 詳情頁側欄危險操作區（封存按鈕） */
.detail-danger {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 4px;
}

/* 列表頁封存顯示切換按鈕 */
.archive-toggle {
    margin-bottom: 12px;
}

/* 已封存列的還原按鈕（內嵌於標題） */
.restore-form {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

/* ────────── 週期（Cycles） ────────── */
/* 燃盡圖（SVG）：圓角淺色背景，佔滿可用寬度 */
.burndown-chart {
    width: 100%;
    height: auto;
    background: var(--surface-2, #171C26);
    border: 1px solid var(--border, #242B3A);
    border-radius: 10px;
}

/* 燃盡圖座標軸刻度文字 */
.chart-label {
    fill: #95A2B3;
    font-size: 11px;
}

/* 燃盡圖圖例項目 */
.chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* 圖例線段樣式：實線（實際）與虛線（理想） */
.legend-line {
    display: inline-block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
}

.legend-line.solid {
    background: #5E6AD2;
}

.legend-line.dashed {
    background: repeating-linear-gradient(90deg, #95A2B3 0 6px, transparent 6px 10px);
}