/* ==========================================================================
   頁面層級的細部調整。
   顏色與版面骨架請改 theme-mackay.css，這裡只放跨頁共用的小樣式。
   ========================================================================== */

/* 表單必填標記 */
.mk-required::after {
    content: " *";
    color: var(--mk-red);
    font-weight: 700;
}

/* 查詢條件列 */
.mk-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.mk-filter__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mk-filter__label {
    font-size: 0.75rem;
    color: var(--mk-text-muted);
    font-weight: 600;
}

.mk-filter__field .form-control,
.mk-filter__field .form-select {
    min-width: 160px;
}

/* 表格內的操作按鈕組 */
.mk-row-actions {
    display: flex;
    gap: 0.25rem;
    white-space: nowrap;
}

.mk-row-actions .btn {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.45rem;
    --bs-btn-font-size: 0.78rem;
}

/* 表格左右兩端留一點內距，捲動時內容不貼齊卡片邊緣（T080） */
.table-responsive > table > * > tr > :first-child {
    padding-left: 0.75rem;
}

.table-responsive > table > * > tr > :last-child {
    padding-right: 0.75rem;
}

/* Modal 內的欄位錯誤訊息 */
.mk-field-error {
    color: var(--bs-danger);
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

/* Vue 尚未掛載完成前先隱藏，避免看到 {{ }} 樣板語法閃一下 */
[v-cloak] {
    display: none !important;
}

/* 空資料提示 */
.mk-empty {
    text-align: center;
    color: var(--mk-text-muted);
    padding: 2.5rem 1rem;
}

.mk-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

/* CSP 不允許 inline style：innerHTML 產生的 HTML（DataTables render 等）改用 class */
.mk-text-xs {
    font-size: 0.72rem;
}

.mk-col-actions {
    width: 190px;
}