body {
    background-color: #f4f5f7;
}

.auth-card {
    max-width: 420px;
    margin: 60px auto;
}

.navbar-brand {
    font-weight: 600;
}

.board-card {
    transition: box-shadow .15s;
}
.board-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15) !important;
}

/* ---- 看板（桌面：清單橫向） ---- */
.board-scroll {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 1rem;
    min-height: 70vh;
}
.board-list {
    background: #ebecf0;
    border-radius: 8px;
    width: 280px;
    min-width: 280px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}
.board-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    padding: 4px 6px;
}
.list-title[data-editable] { cursor: pointer; }
.card-list {
    min-height: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kanban-card {
    background: #fff;
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0 1px 0 rgba(9, 30, 66, .25);
    cursor: pointer;
}
.kanban-card:hover { background: #f7f8f9; }
.card-title-text { font-size: .9rem; }
/* ============================================================
   標籤
   所有「帶標籤顏色」的元素（卡面色條、Modal chip、選色器色票）都掛 .lbl-color，
   並由後端給 data-hue／data-shade；色覺辨認障礙友善模式（body.labels-colorblind）
   依 hue 疊不同圖樣、依 shade 決定圖樣用深色或白色線條。
   ============================================================ */
.lbl-color { --lbl-pat: rgba(0, 0, 0, .22); background-repeat: repeat; }
.lbl-color[data-shade="bold"] { --lbl-pat: rgba(255, 255, 255, .45); }

/* 卡面色條：預設只有色條（文字用 font-size:0 收起），body.labels-expanded 時展開成帶文字的 chip */
.card-label-dot {
    display: inline-block;
    width: 40px;
    height: 8px;
    border-radius: 4px;
    margin: 0 4px 4px 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    transition: width .12s, height .12s;
}
.card-label-dot:hover { filter: brightness(.92); }
body.labels-expanded .card-label-dot {
    width: auto;
    min-width: 40px;
    max-width: 100%;
    height: 16px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Modal 內的標籤 chip（已套用區、選擇器列、表單預覽） */
.label-chip {
    display: inline-block;
    max-width: 100%;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 24px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.label-chip-add {
    background: #e4e6ea;
    color: #172b4d;
    border: 0;
    padding: 0 10px;
    cursor: pointer;
}
.label-chip-add:hover { background: #d0d4db; }

/* 標籤選擇器面板 */
.label-picker {
    margin-top: 6px;
    padding: 8px;
    border: 1px solid #dfe1e6;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(9, 30, 66, .15);
}
.label-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.label-picker-head .btn-close { font-size: .65rem; }
.label-picker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.label-picker-row .form-check-input { margin: 0; flex: 0 0 auto; cursor: pointer; }
.label-picker-row .label-chip { flex: 1 1 auto; cursor: pointer; }
.label-picker-row .label-edit {
    flex: 0 0 auto;
    padding: 0 4px;
    line-height: 24px;
    color: #626f86;
    text-decoration: none;
}
.label-picker-row .label-edit:hover { color: #172b4d; background: #e4e6ea; border-radius: 4px; }
.label-form-preview {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    background: #f1f2f4;
    text-align: center;
}
.label-form-preview .label-chip { min-width: 60%; text-align: center; }
.label-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.label-swatch {
    height: 32px;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
}
.label-swatch:hover { filter: brightness(.92); }
.label-swatch.active { border-color: #0c66e4; box-shadow: inset 0 0 0 2px #fff; }

/* 色覺辨認障礙友善模式：每個色相一種圖樣，同色相的淺／標準／深靠深淺與線條顏色區分 */
body.labels-colorblind .lbl-color[data-hue="green"]  { background-image: repeating-linear-gradient(45deg, var(--lbl-pat) 0 3px, transparent 3px 8px); }
body.labels-colorblind .lbl-color[data-hue="yellow"] { background-image: repeating-linear-gradient(-45deg, var(--lbl-pat) 0 3px, transparent 3px 8px); }
body.labels-colorblind .lbl-color[data-hue="orange"] { background-image: repeating-linear-gradient(0deg, var(--lbl-pat) 0 2px, transparent 2px 6px); }
body.labels-colorblind .lbl-color[data-hue="red"]    { background-image: repeating-linear-gradient(90deg, var(--lbl-pat) 0 2px, transparent 2px 6px); }
body.labels-colorblind .lbl-color[data-hue="purple"] { background-image: radial-gradient(circle, var(--lbl-pat) 1.5px, transparent 2px); background-size: 7px 7px; }
body.labels-colorblind .lbl-color[data-hue="blue"]   { background-image: repeating-linear-gradient(45deg, var(--lbl-pat) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, var(--lbl-pat) 0 2px, transparent 2px 7px); }
body.labels-colorblind .lbl-color[data-hue="sky"]    { background-image: repeating-linear-gradient(45deg, var(--lbl-pat) 0 6px, transparent 6px 14px); }
body.labels-colorblind .lbl-color[data-hue="lime"]   { background-image: conic-gradient(var(--lbl-pat) 25%, transparent 0 50%, var(--lbl-pat) 0 75%, transparent 0); background-size: 8px 8px; }
body.labels-colorblind .lbl-color[data-hue="pink"]   { background-image: linear-gradient(90deg, var(--lbl-pat) 60%, transparent 60%); background-size: 10px 4px; }
body.labels-colorblind .lbl-color[data-hue="gray"]   { background-image: repeating-linear-gradient(-45deg, var(--lbl-pat) 0 2px, transparent 2px 4px, var(--lbl-pat) 4px 6px, transparent 6px 12px); }
.card-badges {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.card-badges:empty { margin-top: 0; }
.card-badges .badge { font-weight: 400; }

/* 卡面摘要（說明／檢查清單／留言／附件）。比照 Trello 把「這張卡有什麼」直接標在卡面上。 */
.card-meta {
    font-size: .75rem;
    color: #5e6c84;
    white-space: nowrap;
}
.card-meta.is-complete { color: #61bd4f; font-weight: 600; }

/* 卡面上的成員頭像，靠右排列 */
.card-avatars {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
}
.avatar-initial.avatar-xs {
    width: 1.25rem;
    height: 1.25rem;
    font-size: .65rem;
}

/* 清單標題的卡片數 */
.list-count {
    font-size: .75rem;
    color: #5e6c84;
    background: rgba(9, 30, 66, .08);
    border-radius: 10px;
    padding: 0 .45rem;
    margin-left: .35rem;
    font-weight: 400;
}
.board-list-header .list-title { flex: 0 1 auto; }
.board-list-header .list-archive { margin-left: auto; }

/* 新增卡片／清單：點了才展開（比照 Trello），常駐輸入框視覺太雜 */
.add-card-box { margin-top: 6px; }
.add-card-trigger {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 6px 8px;
    color: #5e6c84;
    font-size: .875rem;
    cursor: pointer;
}
.add-card-trigger:hover { background: rgba(9, 30, 66, .08); color: #172b4d; }
.add-list-box { background: rgba(255, 255, 255, .55); }
.add-list-box .add-card-trigger { color: #172b4d; font-weight: 500; }

.sortable-ghost { opacity: .4; }

/* ---- 卡片說明（Markdown） ---- */
/* 原本寫死 min-height:400px，一行說明也是一個佔滿畫面的空白框，
   且超過時會出現 textarea 內捲軸與 modal 捲軸兩層。
   現在改為由 board.js 的 autoGrow() 隨內容調整高度，這裡只留下限。 */
#cardDescription {
    min-height: 120px;
    resize: vertical;
    overflow-y: hidden;
}
.card-desc-view {
    min-height: 120px;
    padding: 10px 12px;
    background: #f7f8f9;
    border: 1px solid #e2e4e8;
    border-radius: 6px;
    overflow-wrap: anywhere;
}
.card-desc-view img { max-width: 100%; height: auto; }
.card-desc-view pre {
    background: #eef0f2;
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
}
.card-desc-view table { border-collapse: collapse; }
.card-desc-view table td, .card-desc-view table th { border: 1px solid #ccc; padding: 4px 8px; }
.card-desc-view :last-child { margin-bottom: 0; }

/* 留言內容：後端已渲染為 Markdown HTML（單行換行已轉 <br>），故不需 pre-wrap。 */
.comment-content {
    overflow-wrap: anywhere;
}
.comment-content > :last-child { margin-bottom: 0; }
.comment-content pre {
    background: #eef0f2;
    padding: 6px 8px;
    border-radius: 4px;
    overflow-x: auto;
}
.comment-content img { max-width: 100%; height: auto; }
.comment-actions a { text-decoration: none; }

/* ---- 載入指示（頂部細進度條）---- */
/* 送出期間原本畫面完全靜止，使用者無從得知系統在做事，於是重複點擊。 */
#app-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 2100;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
#app-progress.active { opacity: 1; }
#app-progress.active::before {
    content: '';
    display: block;
    height: 100%;
    width: 40%;
    background: #0d6efd;
    animation: app-progress-slide 1s ease-in-out infinite;
}
@keyframes app-progress-slide {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* ---- Toast ---- */
#app-toast-box {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    max-width: 320px;
}
.app-toast {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    white-space: pre-line;   /* 讓 errors 的多行欄位訊息能換行顯示 */
}

/* ---- 登入過期提示（不自動消失，避免使用者正在輸入時被直接導走）---- */
.app-auth-expired {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2200;
    max-width: 90vw;
}

/* ---- 卡片說明編輯 ---- */
.description-view {
    cursor: text;
    min-height: 2.5rem;
    padding: .25rem .5rem;
    border-radius: 4px;
}
.description-view:hover { background: #f1f3f5; }
.markdown-preview {
    border: 1px dashed #ced4da;
    border-radius: 4px;
    padding: .5rem;
    background: #fbfcfd;
}

/* 未儲存標記 */
.is-dirty { border-color: #ffc107 !important; }

/* ---- 看板顏色（board.background）---- */
/* 看板頁的底色由 views/board/view.php 以 registerCss 注入到 body，
   色值取自 BoardService::BOARD_BACKGROUNDS 白名單。
   （先前只在標題旁放一條 6px 色塊，幾乎看不出來，已移除。） */
.board-card-bar {
    height: 6px;
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}

/* ---- 文字頭像 ---- */
/* 使用者沒有頭像圖檔時以姓名首字 + 固定色呈現（user.avatar 欄位尚未啟用上傳）。 */
.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    flex: 0 0 auto;
    user-select: none;
}

/* ---- 表格（記帳表／清冊）編輯器 ---- */
.sheet-wrap { background: #fff; border-radius: 6px; }
.sheet-table th { white-space: nowrap; background: #f4f5f7; font-weight: 600; font-size: .85rem; }
.sheet-table td { padding: 2px 4px; vertical-align: middle; }
.sheet-table .sheet-cell {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    min-width: 6rem;
}
.sheet-table .sheet-cell:focus { border-color: #86b7fe; background: #fff; }
.sheet-table .sheet-cell:disabled { background: transparent; color: #172b4d; opacity: 1; }
.sheet-table textarea.sheet-cell { min-height: 2rem; resize: none; overflow: hidden; }
.sheet-table .sheet-num { font-variant-numeric: tabular-nums; }
.sheet-table .sheet-balance {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    background: #fff9c4;          /* 對應原記帳表的黃底餘額欄 */
    white-space: nowrap;
}
.sheet-table .sheet-balance-col { background: #fff3a3; }
.sheet-table .sheet-handle-col, .sheet-table .sheet-handle { width: 1.5rem; text-align: center; cursor: grab; }
.sheet-table .sheet-idx-col, .sheet-table .sheet-idx { width: 2.5rem; text-align: right; }
.sheet-table .sheet-act-col, .sheet-table .sheet-act { width: 2rem; text-align: center; }
.sheet-table .sheet-col-editable { cursor: pointer; }
.sheet-table .sheet-col-remove { font-weight: 400; }
.sheet-table tbody tr.sortable-ghost { opacity: .4; }

/* ---- 搜尋與篩選 ---- */
.board-filter {
    padding: .5rem;
    border-radius: 6px;
    background: #f8f9fa;
}
/* 篩選生效時給明顯提示，避免使用者忘了還在篩選狀態而以為卡片不見了 */
.board-filter.filtering {
    background: #fff3cd;
    box-shadow: inset 0 0 0 1px #ffe69c;
}

/* ---- 手機版 ---- */
@media (max-width: 768px) {
    .board-list {
        width: 85vw;
        min-width: 85vw;
    }
    .modal-lg { max-width: 100%; }

    /* 400px 的固定高度在手機上幾乎佔滿整個可視區 */
    #cardDescription { min-height: 160px; }

    /* toast 原本固定在右上，會蓋住 modal 標題與關閉鈕 */
    #app-toast-box {
        top: auto;
        bottom: 1rem;
        left: .5rem;
        right: .5rem;
        max-width: none;
    }
}