/* 1. 定義基準：確保 1rem 絕對等於 16px */
html {
    font-size: 16px;
}


/* 覆蓋 Telerik 預設顏色變數 */
:root {
    /* 1. Blue: 元件主色 (Button, Tab, Checkbox...) */
    --kendo-color-primary: #00529b !important;
    --kendo-color-primary-hover: #003f75 !important; /* 用於滑鼠懸停 */
    --kendo-color-primary-active: #003f75 !important; /* 點擊時的顏色 */
    /*Grid 上的Button*/
    --kendo-color-primary-on-surface: #00529b !important;
    --kendo-color-error-on-surface: #d9531e !important;

    /* 2. Red: 錯誤與不匹配 (Error) */
    --kendo-color-error: #d9531e !important;
    --kendo-color-error-hover: #b54215 !important;
    /* 3. Green: 成功狀態 */
    --kendo-color-success: #006225 !important;
    /* 4. Yellow: 警告狀態 */
    --kendo-color-warning: #ffe01b !important;
    /* 5. Light Blue: 資訊提示 (Info) */
    --kendo-color-info: #a1d1f0 !important;
    /* 6. Black & White: 文字與背景 */
    --kendo-body-text: #2D2926 !important; /* 文字顏色 */
    --kendo-body-bg: #FFFFFF !important; /* 背景顏色 */
    --kendo-color-app-surface: #FFFFFF !important; /* 卡片或區塊背景 */
    /* 7. Navy: 深色背景/次要按鈕 (Secondary) */
    /* ThemeColor="secondary" 的元件就會變這個色 */
    --kendo-color-secondary: #00205B !important;
    --kendo-color-secondary-hover: #00153d !important;
    --kendo-body-font-size: 1rem !important;
    --kendo-font-size: 1rem !important;
}

body {
    font-size: 1rem; /* 繼承 16px */
    line-height: 1.5;
}

p {
    font-size: 1rem; /* 明確指定 p 為 16px */
    margin-bottom: 1rem; /* 保持段落間距 */
}

/* 額外自訂：處理您的特殊色 (Light Brown) */
/* Telerik 預設沒有 Light Brown 的變數，建議自訂 class 給特殊區塊用 */
.bg-light-brown {
    background-color: #d8b8a8 !important;
}

.text-light-brown {
    color: #d8b8a8 !important;
}

/* 2. 標題層級 (Headers) */
h1, .h1 { font-size: 2.5em !important; font-weight: bold; }
h2, .h2 { font-size: 2em !important; font-weight: bold; }
h3, .h3 { font-size: 1.75em !important; font-weight: bold; }
h4, .h4 { font-size: 1.5em !important; font-weight: bold; }
h5, .h5 { font-size: 1.25em !important; font-weight: bold; }
h6, .h6 { font-size: 1.125em !important; font-weight: bold; }

/* 3. Caption (說明文字) */
/* 在 HTML 中使用 <span class="caption"> 或 <small> */
.caption, small, .small {
    font-size: 0.875em;
    /* 建議：Caption 通常顏色會比本文淺一點，若需要可取消註解下面這行 */
    /* color: #6c757d; */
}


/*Popup視窗的標題*/
.k-dialog{
    border: none;   
   /* width: 90% !important;*/
    min-width: 300px !important;
    height: auto !important;
    max-height: 90% !important;
}

.k-dialog-title{
    font-weight: 500;
}

.k-dialog-titlebar {
    background-color: #00205B;
    color: #ffffff;
    padding: 1rem;
    font-weight: bold;
}

/* dialog & window's action bar */
.k-actions{
    background-color: #F5F5F5;
    border-top: none;
    padding: 1rem;
}

/*Window視窗的標題*/
.k-window-titlebar {
    background-color: #00205B;
    color: #ffffff;
    padding: 1rem;
    font-weight: bold;
}

/*視窗的叉叉*/
.k-window-titlebar-action {
    opacity: 1;
}

/*CheckBox 加深*/
.k-checkbox {
    border-width: 2px;
    border-color: gray;
}

/*RadioBox 加深*/
.k-radio {
    border-width: 2px;
    border-color: gray;
}

/*Grid 焦點*/
.k-grid th.k-focus,
.k-grid td.k-focus,
.k-grid td:focus-within {
    outline: none;
    box-shadow: inset 0 0 0 2px #ff6f00, 0 0 0 4px rgba(255, 111, 0, .35);
    background-color: #fff3e0;
}

/*Switch*/
.k-switch-label-on, .k-switch-label-off {
    display: inline;
}

.k-switch-label-on {
    left: 7px;
    color: #ffffff;
    text-transform: uppercase;
}

.k-switch-label-off {
    right: 5px;
    color: #424242;
    text-transform: uppercase;
}

.k-button-group button.k-button.tg-selected,
.k-button-group button.k-button.tg-selected:hover {
    color: #00529b;
    background-color: #9BC9F533;
    border: 2px solid #00529b;
}

.k-button-group button.k-button.tg-unselected,
.k-button-group button.k-button.tg-unselected:hover {
    color: #00529b;
    background-color: transparent;
    border: 1px solid #CCCCCC;
}

/*Telerik Form Group 都不要有Group底線*/
.k-form-legend {
    display: none;
}

/*Telerik Upload 隱藏預設的上傳按鈕*/
.k-upload .k-dropzone {
    display: none !important;
    padding: 0;
    border: 0;
}
/*Telerik Tree 根下有 tree-root-title 整個反灰*/
.k-treeview-item:has(.tree-root-title) > .k-treeview-top {
    background-color: #f0f0f0;
}

/* 確保 Notification 顯示在 Dialog 遮罩之上 */
/* TelerikDialog 的預設 z-index 是 10003，所以設定更高的值 */
.app-notification-high-z-index {
    z-index: 99999 !important;
}

/* 確保 colorpicker 100% */
.k-colorpicker {
    width: 100%;
}

/* dropzone 不要有框 */
.k-dropzone-inner {
    border-width: 0px;
    background-color: transparent !important;
}

/*dropdown 框*/
.k-picker-solid {
    border-color:gray;
}

/* dropdown - 當外層 li 被選中時，強制內層的自定義文字變白色 */
.k-list-item.k-selected .app-ddl-item-text {
    color: #ffffff !important;
}

/*原本的k-disabled太淺了*/
.k-disabled {
    opacity: 1 !important; /* 先移除透明度效果，以便我們完全控制顏色 */
    color: #555555 !important;  /*設定深灰色文字 */
    background-color: #e0e0e0 !important; /* 設定背景色 (視元件而定) */
    cursor: not-allowed; /* 確保滑鼠游標顯示為禁止符號 */
    border-color: #e0e0e0 !important; /* 設定背景色 (視元件而定) */
}

/* 1. 移除灰色矩形背景 */
/* 針對 disabled 的 list item 移除背景色與邊框 */
.k-radio-list-item.k-disabled {
    background-color: transparent !important; /* 變透明，移除灰色底 */
    border-color: transparent !important; /* 移除邊框 */
}

/* 2. 將 Radio Button 的顏色從藍色改為灰色 */
/* 設定 disabled 狀態下的圓圈邊框顏色 */
.k-radio-list-item.k-disabled .k-radio {
    border-color: #adadad !important; /* 灰色邊框 */
    background-color: #fff !important; /* 未選中時背景為白 */
}

/* 設定 disabled 且被選中 (Checked) 時的樣式 */
.k-radio-list-item.k-disabled .k-radio:checked {
    background-color: #adadad !important; /* 將原本的藍色填滿改為灰色 */
    border-color: #adadad !important; /* 邊框也改為灰色 */
    box-shadow: none !important; /* 移除可能的陰影效果 */
}