/* =====================================
   MudBlazor SaaS UI Enhancement
   ===================================== */
/* ----------------- Buttons ----------------- */
.mud-button-root {
    border-radius: 12px !important; /* 這會影響所有按鈕 */
   /* padding: 8px 18px;*/
   
min-height: 38px;
    text-transform: none;
    font-weight: 500;
    transition: all .15s ease;
}

    .mud-button-root:hover {
        transform: translateY(-1px);
    }

/* ----------------- Cards ----------------- */
.mud-card {
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ----------------- Dialogs ----------------- */
.mud-dialog {
    border-radius: 12px;
    padding: 16px;
}

/* ----------------- Table ----------------- */
.mud-table-row:hover {
    background: rgba(124,58,237,0.08); /* Primary 淺紫 hover */
}

/* ----------------- TreeView ----------------- */
.mud-treeview-item-content:hover {
    background: rgba(124,58,237,0.08);
}

/* ----------------- Alert / Snackbar ----------------- */
.mud-alert, .mud-snackbar {
    border-radius: 12px;
    font-weight: 500;
 /*   padding: 10px 16px !important;*/
}

/* ----------------- Badge / Chip ----------------- */
/*.mud-chip, .mud-badge {
    border-radius: 8px;
    font-weight: 500;
    padding: 4px 10px;
}
*/
/* ----------------- Optional: hover shadows ----------------- */
.mud-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


.demo-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, white);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, white);
    color: #0F172A;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.08);
}

.demo-ribbon-icon {
    color: var(--mud-palette-primary);
    font-size: 0.95rem !important;
    flex-shrink: 0;
}

.ribbon-text {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.demo-ribbon-link {
    color: var(--mud-palette-primary) !important;
    font-weight: 800;
    text-decoration: underline;
}

    .demo-ribbon-link:hover {
        color: var(--mud-palette-secondary) !important;
    }


.demo-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    /*  background: #D97706;*/
    background:  var(--mud-palette-secondary);
    color: white;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin-right: 6px;
}
.demo-message {
    display: flex;
    align-items: center;
    min-width: 0;
}

.demo-ribbon-link {
    color: var(--mud-palette-primary) !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .ribbon-text {
        font-size: 0.72rem;
        gap: 6px;
    }
}
.demo-mobile {
    display: none;
}

.demo-desktop {
    display: inline;
}

@media (max-width: 768px) {
    .demo-mobile {
        display: inline;
    }

    .demo-desktop {
        display: none;
    }
}
    /* 手機上更緊湊 */
    @media (max-width: 600px) {
        .demo-ribbon {
            padding: 7px 10px;
            font-size: 0.72rem;
            justify-content: flex-start;
        }
    }

    /* 2. 專門修復 ToggleItem 的圓角 (還原預設值) */
    /* 我們透過父層 .mud-toggle-group 來精確定位 */
    .mud-toggle-group .mud-button-root {
        border-radius: 0 !important; /* 先全部重設為直角 */
    }

    /* 3. 恢復 ToggleGroup 的整體圓角效果 (頭尾才有圓角) */
    .mud-toggle-group .mud-toggle-item:first-child .mud-button-root {
        border-top-left-radius: var(--mud-default-borderradius) !important;
        border-bottom-left-radius: var(--mud-default-borderradius) !important;
    }

    .mud-toggle-group .mud-toggle-item:last-child .mud-button-root {
        border-top-right-radius: var(--mud-default-borderradius) !important;
        border-bottom-right-radius: var(--mud-default-borderradius) !important;
    }