/* ==========================================================================
   金寶貝 CDSS — 童趣粉彩皮膚（kinbabe-soft）
   疊在 theme-mackay.css／site.css 之後載入：只覆寫顏色與圓角，不動版面結構。
   參考視覺：金寶貝童趣插畫（粉兔、胡蘿蔔橘、奶油天空、糖果粉）。
   還原方式：拿掉 Client/index.html 與兩個 Layout 裡本檔的 <link> 即回到馬偕紅主題。

   原則：
   - 臨床狀態色不動——紅燈/黃燈章、圖表資料色（#c43131/#b98200/#3e7cc1）
     是警示語意，風格不得覆蓋。
   - 主色（按鈕/連結/選單 active）用深胡蘿蔔 #c2543c，保住白字對比。
   ========================================================================== */

:root {
    /* 主色：胡蘿蔔橘（btn-primary、連結、focus、分頁、勾選全部跟著變） */
    --mk-red: #c2543c;
    --mk-red-dark: #a84732;
    --mk-red-light: #fdf0ea;
    --mk-red-border: #f3cdbd;

    /* 側欄：與奶油畫布同家族的暖杏色（深一階做出層次），active 用主色胡蘿蔔橘 */
    --mk-sidebar-bg: #f8e7cd;
    --mk-sidebar-hover: #f2d9b4;
    --mk-sidebar-active: #c2543c;
    --mk-sidebar-text: #7d5636;
    --mk-sidebar-text-active: #ffffff;
    --mk-sidebar-group: #b08a5c;

    /* 畫布：奶油天空 */
    --mk-body-bg: #fdf4e6;
    --mk-card-border: #f3ddcd;
    --mk-text: #4a3c42;
    --mk-text-muted: #97808a;

    --bs-primary: #c2543c;
    --bs-primary-rgb: 194, 84, 60;
    --bs-link-color: #c2543c;
    --bs-link-color-rgb: 194, 84, 60;
    --bs-link-hover-color: #a84732;

    /* 金寶貝兔子吉祥物（啃胡蘿蔔的小兔，內嵌 SVG）：登入頁與儀表板共用 */
    --kb-bunny: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cellipse cx='44' cy='26' rx='9' ry='22' fill='%23f6c9dc' transform='rotate(-14 44 26)'/%3E%3Cellipse cx='44' cy='29' rx='4.5' ry='14' fill='%23fbe4ee' transform='rotate(-14 44 29)'/%3E%3Cellipse cx='76' cy='26' rx='9' ry='22' fill='%23f6c9dc' transform='rotate(14 76 26)'/%3E%3Cellipse cx='76' cy='29' rx='4.5' ry='14' fill='%23fbe4ee' transform='rotate(14 76 29)'/%3E%3Ccircle cx='60' cy='58' r='34' fill='%23f6c9dc'/%3E%3Ccircle cx='48' cy='52' r='3.6' fill='%235c4350'/%3E%3Ccircle cx='72' cy='52' r='3.6' fill='%235c4350'/%3E%3Ccircle cx='49.3' cy='50.8' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='73.3' cy='50.8' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='41' cy='62' r='4.6' fill='%23f3a3c0' opacity='.6'/%3E%3Ccircle cx='79' cy='62' r='4.6' fill='%23f3a3c0' opacity='.6'/%3E%3Cpath d='M56.5 60 q3.5 -3 7 0 q-1.8 3.2 -3.5 3.2 q-1.7 0 -3.5 -3.2' fill='%23e58fb4'/%3E%3Cpath d='M60 63 v4 m0 0 q-4 4 -8 1 m8 -1 q4 4 8 1' stroke='%23e58fb4' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cg transform='rotate(12 60 80)'%3E%3Cpath d='M38 78 L82 72 L46 92 Z' fill='%23ef8a4b'/%3E%3Cellipse cx='84' cy='70' rx='7' ry='3.4' fill='%2390c268' transform='rotate(-18 84 70)'/%3E%3Cellipse cx='88' cy='75' rx='6' ry='3' fill='%23a8d07e' transform='rotate(16 88 75)'/%3E%3C/g%3E%3Ccircle cx='48' cy='76' r='6.5' fill='%23f6c9dc'/%3E%3Ccircle cx='68' cy='74' r='6.5' fill='%23f6c9dc'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   硬編碼色的補丁（theme-mackay 內未走變數的部分）
   -------------------------------------------------------------------------- */
.mk-sidebar__brand-text {
    color: #6b4327;
}

.mk-topbar {
    background: #fffdf8;
}

.mk-topbar__burger:hover {
    background: var(--mk-red-light);
    color: var(--mk-red);
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(194, 84, 60, 0.14);
}

/* --------------------------------------------------------------------------
   圓潤：卡片、按鈕、輸入框、彈窗
   -------------------------------------------------------------------------- */
.mk-card,
.pbi-tile {
    background: #fffdf8;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(141, 94, 70, 0.07);
}

.mk-card__header {
    border-bottom-color: #f6e7d7;
}

.btn {
    border-radius: 0.7rem;
}

.btn-sm {
    border-radius: 0.6rem;
}

.form-control,
.form-select {
    border-radius: 0.6rem;
}

.modal-content {
    border-radius: 16px;
}

.dropdown-menu {
    border-radius: 12px;
}

.mk-badge {
    border-radius: 999px;
}

/* 儀表板 KPI 文字墨色跟著暖色系 */
.pbi-kpi__value {
    color: var(--mk-text);
}

/* 角色頁權限標籤改珊瑚暖調 */
.role-chip {
    border-color: #f2cdbb;
    background: #fdf2ea;
    color: #b05a3f;
}

/* --------------------------------------------------------------------------
   登入頁：粉彩天空 + 童趣插畫（雲朵、太陽、草地胡蘿蔔、探頭小兔）
   全部用內嵌 SVG 背景，不動 Login.cshtml 結構
   -------------------------------------------------------------------------- */
.mk-login {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fde9cd 0%, #fbdcdf 55%, #f9d2e2 100%);
}

/* 天空：雲朵與太陽 */
.mk-login::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 220px;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 70'%3E%3Ccircle cx='140' cy='26' r='17' fill='%23f9c25c'/%3E%3Ccircle cx='140' cy='26' r='12' fill='%23fbd184'/%3E%3Cg fill='%23ffffff' opacity='.9'%3E%3Cellipse cx='38' cy='40' rx='26' ry='12'/%3E%3Cellipse cx='55' cy='33' rx='16' ry='10'/%3E%3Cellipse cx='22' cy='34' rx='13' ry='8'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
    background-size: 560px auto;
    background-position: -40px 18px;
}

/* 草地與小胡蘿蔔 */
.mk-login::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 120px;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 28 Q50 10 100 26 Q150 42 200 24 Q250 8 300 26 Q350 42 400 22 L400 60 L0 60 Z' fill='%23cfe5b2'/%3E%3C/svg%3E") bottom/100% 70px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cg transform='translate(18 6)'%3E%3Cpath d='M0 10 L14 13 L2 22 Z' fill='%23ef8a4b'/%3E%3Cellipse cx='15' cy='10' rx='5' ry='2.6' fill='%2390c268' transform='rotate(-24 15 10)'/%3E%3C/g%3E%3Cg transform='translate(84 14)'%3E%3Cpath d='M14 8 L0 12 L12 20 Z' fill='%23ef8a4b'/%3E%3Cellipse cx='-1' cy='9' rx='5' ry='2.6' fill='%2390c268' transform='rotate(24 -1 9)'/%3E%3C/g%3E%3C/svg%3E") bottom 14px center/300px auto no-repeat;
}

.mk-login__card {
    position: relative;
    z-index: 1;
    border-radius: 22px;
    border: 2px solid #f6d8c6;
    box-shadow: 0 18px 44px rgba(176, 90, 64, 0.18);
}

/* 探頭小兔（啃著胡蘿蔔），掛在卡片右上角 */
.mk-login__card::before {
    content: "";
    position: absolute;
    top: -74px;
    right: 14px;
    width: 104px;
    height: 78px;
    pointer-events: none;
    background: var(--kb-bunny) no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   兔子吉祥物（儀表板問候列等內頁使用）：輕微上下浮動，動效敏感者停用
   -------------------------------------------------------------------------- */
.kb-mascot {
    display: inline-block;
    width: 60px;
    height: 46px;
    flex-shrink: 0;
    pointer-events: none;
    background: var(--kb-bunny) no-repeat center / contain;
    animation: kb-bob 2.8s ease-in-out infinite;
}

@keyframes kb-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .kb-mascot {
        animation: none;
    }
}