/* ==========================================================================
   頁面層級的細部調整。
   顏色與版面骨架請改 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;
}

/* 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;
}