:root {
    --white: #FFFFFF;
    --black: #000000;

    --primary: #3B82F6;
    --primary-hover: #2563EB;
    --secondary: #2B2B2B;
    --secondary-hover: #1F2937;

    --primary100: rgba(59, 130, 246, 0.1);

    --color-ui-background: #FFFFFF;

    --theme-color: #3B82F6;
    --theme-hover-color: #3B82F633;
    --theme-light-bg-color: #F8F8FA;
    --theme-dark-bg-color: #EAEAEE;
    --theme-outer-shadow-color: #3B82F64d;
    --theme-inset-shadow-color: #3B82F61a;
    --theme-outer-shadow: 0px 2px 8px var(--theme-outer-shadow-color);
    --theme-inset-shadow: 0px 5px 8px var(--theme-inset-shadow-color) inset;

    --light-text: #FFFFFF;
    --middle-text: #6B7280;
    --dark-text: #111827;

    --bg-main: #F5F5F9;
    --bg-main-alpha90: rgba(245, 245, 249, 0.9);
    --bg-blur: blur(1rem);
    --light-bg: #FAFAFD;
    --transparent: transparent;

    --sucess: #10B981;
    --sucess-light-bg: #D1FAE5;
    --warning: #F59E0B;
    --warning-light-bg: #FEF3C7;
    --error: #EF4444;
    --error-light-bg: #FEE2E2;
    --error-bg-alpha100: rgba(239, 68, 68, 0.1);
    --info: #3B82F6;
    --info-light-bg: #DBEAFE;

    --tag-red: #EF4444; 
    --tag-red-hover: #DC2626;
    --tag-orange: #F97316; 
    --tag-orange-hover: #EA580C;
    --tag-yellow: #EAB308; 
    --tag-yellow-hover: #CA8A04;
    --tag-green: #10B981; 
    --tag-green-hover: #059669;
    --tag-blue: #3B82F6; 
    --tag-blue-hover: #2563EB;
    --tag-purple: #8B5CF6; 
    --tag-purple-hover: #7C3AED;
    --tag-pink: #EC4899; 
    --tag-pink-hover: #DB2777;
    --tag-blueGray: #94A3B8; 
    --tag-blueGray-hover: #64748B;
    --tag-lightBlue: #06B6D4; 
    --tag-lightBlue-hover: #0891B2;
    --tag-darkBlue: #6366F1; 
    --tag-darkBlue-hover: #4F46E5;
    --tag-lightgray: #D1D5DB;
    --tag-lightgray-hover: #9CA3AF;
    --tag-radius: 0.25rem;

    --tag-member-bg: #D1D5DB;

    --gray100: #F6F7F8;
    --gray200: #ECEFF1;
    --gray300: #E1E6EA;
    --gray400: #CFD8DC;
    --gray500: #B0BEC5;
    --gray600: #90A4AE;
    --gray700: #607D8B;
    --gray800: #455A64;
    --gray900: #263238;

    --add-light100: rgba(255, 255, 255, 0.1);
    --add-light200: rgba(255, 255, 255, 0.2);
    /* --add-light400: rgba(255, 255, 255, 0.4); */
    --add-light500: rgba(255, 255, 255, 0.5);
    /* --add-light600: rgba(255, 255, 255, 0.6); */
    --add-light800: rgba(255, 255, 255, 0.8);
    /* --add-light900: rgba(255, 255, 255, 0.9); */

    --add-dark50: rgba(0, 0, 0, 0.06);
    --add-dark100: rgba(0, 0, 0, 0.1);
    --add-dark200: rgba(0, 0, 0, 0.2);
    /* --add-dark400: rgba(0, 0, 0, 0.4); */
    --add-dark500: rgba(0, 0, 0, 0.5);
    /* --add-dark600: rgba(0, 0, 0, 0.6); */
    /* --add-dark800: rgba(0, 0, 0, 0.8); */
    /* --add-dark900: rgba(0, 0, 0, 0.9); */


    /* Component Tokens */
    /* Worksheet */
    --cell-bg: #FFFFFF;
    --cell-border: 1px solid #D1D5DB;
    --cell-border-color: #D1D5DB;
    --cell-head-text: #6B7280;
    --cell-head-arrow: #6B7280;
    --cell-head-arrow-bg: transparent;
    --table-top-border: 1px solid #D1D5DB;
    --table-left-border: 1px solid #E8EAF3;
    --sheet-bg: #E8EAF3;
    --sheet-head-bg: #FAFAFD;
    --sheet-viewsbar-bg: #E8EAF3;
    --sheet-viewsbar-bottom: 1px solid #E8EAF3;
    --sheet-viewsbar-button-hover: rgba(0, 0, 0, 0.06);
    --sheet-toolbar-bg: #FAFAFD;
    --sheet-sidebar-bg: #FAFAFD;
    --sheet-sidebar-border: 1px solid #D1D5DB;
    --sheet-topbar-bg: #FAFAFD;
    --sheet-bottombar-bg: #FAFAFD;
    --sheet-sum-bg: #FAFAFD;
    --sheet-sum-bg-hover: #F0F0F5;
    --sheet-sum-text: #9CA3AF;
    --sheet-sum-name: #9CA3AF;
    --sheet-sum-value: #2B2B2B;
    --sheet-sum-menu-title: #9CA3AF;
    --sheet-sum-menu-hr: 1px solid #D1D5DB;
    --sheet-eye-color: #8B5CF6;
    --sheet-skin-border: 1px solid rgba(0, 0, 0, 0.1);

    --sheet-cardview-bg: #F8F8FA;
    --sheet-cardview-border: none; /*1px solid #E5E7EB;*/
    --sheet-cardview-radius: 1rem;
    --sheet-cardview-card-bg: #FFFFFF;
    --sheet-cardview-more-radius: 0.5rem;
    --sheet-cardview-more-hover: rgba(255, 255, 255, 0.6);
    --sheet-cardview-more-border: 1px solid transparent;
    --sheet-cardview-more-border-hover: 1px solid #FFFFFF;
    --sheet-cardview-more-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --sheet-cardview-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    --sheet-board-bg: #FAFAFD;
    --sheet-board-button-bg: rgba(59, 130, 246, 0.2);
    --sheet-board-button-bg-hover: rgba(59, 130, 246, 0.4);
    --sheet-board-button-text: #3B82F6;
    --sheet-board-button-border: 1px solid rgba(59, 130, 246, 0.2);
    --sheet-board-button-radius: 0.5rem;

    --sheet-detail-list-bg: #E8EAF3;
    --sheet-detail-list-item-border: 1px solid #D1D5DB;
    --sheet-detail-list-item-border-no: 1px solid transparent;
    --sheet-detail-list-item-border-focus: 1px solid #3B82F6;
    --sheet-detail-list-item-bg: #FFFFFF;
    --sheet-detail-list-item-bg-hover: rgba(59, 130, 246, 0.2);
    --sheet-detail-list-item-bg-focus: rgba(59, 130, 246, 0.2);
    --sheet-detail-bg: #FAFAFD;

    --sheet-gallery-bg: #E8EAF3;
    --sheet-gallery-top-border: 1px solid #D1D5DB;
    --sheet-gallery-cover: #FAFAFD;
    --sheet-gallery-cover-radius: 0.75rem;

    --sheet-calendar-weekhead-bg: #E8EAF3;
    --sheet-calendar-toolbar-bg: #FAFAFD;
    --sheet-calendar-toolbar-text: #9CA3AF;
    --sheet-calendar-toolbar-button-hover: rgba(0, 0, 0, 0.06);
    --sheet-calendar-toolbar-title: #2B2B2B;
    --sheet-calendar-sidebar-bg: #E8EAF3;
    --sheet-calendar-sidebar-border: 1px solid #D1D5DB;
    --sheet-calendar-sidebar-border-color: #D1D5DB;
    --sheet-calendar-cell-bg-open: #FAFAFD;
    --sheet-calendar-cell-bg-close: #E8EAF3;
    --sheet-calendar-cell-text-close: #9CA3AF;

    --sheet-gunter-sidebar-bg: rgba(232, 234, 243, 0.1);
    --sheet-gunter-bg: rgba(232, 234, 243, 0.3);
    --sheet-gunter-select-hover: rgba(232, 234, 243, 0.5);

    --sheet-resourceview-bg: #FAFAFD;
    --sheet-resourceview-bg-dark: rgba(232, 234, 243, 0.5);

    --sheet-record-bg: #E8EAF3;
    --sheet-record-tool-bg: #FAFAFD;

    --sheet-border: 1px solid #D1D5DB;
    --sheet-border-color: #D1D5DB;
    --sheet-pg-text: #9CA3AF;

    --sheet-nav-color: #CFD8DC;
    --sheet-nav-color-text: #FFFFFF;

    /* Form */
    --form-input-bg: #FFFFFF;
    --form-input-text: #111827;
    --form-input-border: 1px solid #D1D5DB;
    --form-input-border-color: #D1D5DB;
    --form-input-placeholder: #9CA3AF;
    --form-input-focus-border: 2px solid rgba(0, 0, 0, 0.2);
    --form-radius: 0.5rem;
    --form-hover-border: rgba(59, 130, 246, 0.2);
    --form-focus-shadow-ring: 0 0 0 2px rgba(59, 130, 246, 0.35);
    --form-focus-border-color: #3B82F6;
    --form-disabled-bg: #F3F4F6;
    --form-disabled-fg: #9CA3AF;
    --form-disabled-border: #E5E7EB;


    --trigger-text: #64748B;
    --trigger-bg: #D1D5DB;

    /* Toggle Radio */
    --toggle-radio-bg: #D1D5DB;
    --toggle-radio-radius: 0.5rem;
    --toggle-radio-text: #64748B;
    --toggle-radio-item-bg-hover: rgba(255, 255, 255, 0.2);
    --toggle-radio-item-bg: #FFFFFF;
    --toggle-radio-item-text: #3B82F6;
    --toggle-radio-item-radius: 0.4rem;
    --toggle-radio-item-disabled-text: #9CA3AF;


    /* Card */
    --card-bg: #FFFFFF;
    --card-border: 1px solid #E1E6EA;
    --card-radius: 0.75rem;
    --card-overlay: rgba(0, 0, 0, 0.7);
    --card-bg-blur: blur(1rem);
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 4px 16px rgba(57, 61, 63, 0.05);
    --card-shadow-focus: 0 8px 8px rgba(0, 0, 0, 0.25);
    --card-shadow-focus-double-solid: 0 0 0 10px rgba(0, 0, 0, 0.1);
    --card-error-shadow: 0 0 0 10px rgba(239, 68, 68, 0.5);
    --card-border-focus-white: 2px solid #FFFFFF;
    --card-border-focus-black: 2px solid #000000;
    --card-primary-border-focus: 2px solid rgba(30, 79, 188, 0.8);
    --card-primary-shadow-focus: 0 0 0 8px rgba(30, 79, 188, 0.1);


    /* Button */
    --button-light-text: #FFFFFF;
    --button-dark-text: #111827;
    --button-primary: #3B82F6;
    --button-primary-hover: #2563EB;
    --button-secondary: #2B2B2B;
    --button-secondary-hover: #1F2937;
    --button-danger: #EF4444;
    --button-danger-hover: #DC2626;
    --button-cancel: #6B7280;
    --button-cancel-hover: #4B5563;
    --button-white: #FFFFFF;
    --button-white-hover: #F3F4F6;
    --button-white-border: 1px solid #D1D5DB;
    --button-gray: #F3F4F6;
    --button-gray-hover: #E5E7EB;
    --button-disabled: #D1D5DB;
    --button-disabled-text: #9CA3AF;
    --button-border: 1px solid #D1D5DB;
    --button-border-color: #D1D5DB;
    --button-border-hover-bg: #E5E7EB;
    --button-toolicon: transparent;
    --button-toolicon-hover: #E1E6EA;
    --button-toolicon-radius: 0.25rem;
    --button-radius: 0.5rem;
    --button-pill-radius: 9999px;


    /* Badge */
    --badge-bg: #F3F4F6;
    --badge-fg: #374151;
    --badge-border: #E5E7EB;

    /*-------------------- Radius --------------------*/
    --radius-xs: 0.25rem;
    
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    
    --pill-radius: 9999px;
    --circle-radius: 50%;

    /* 面板內圓角 */
    --skin-inner-radius: 0.5rem;
    /* 面板外圓角 */
    --skin-outer-radius: 1rem;
    /* 面板內的元件圓角 */
    --skin-btn-radius: 0.5rem;
    /* 卡片外圓角 */
    --card-outer-radius: 0.4rem;
    /* 卡片圖示(小)圓角 */
    --card-icon-small-radius: 0.25rem;
    /* 卡片圖示(中)圓角 */
    --card-icon-middle-radius: 0.5rem;

    /*-------------------- Color --------------------*/

    /* 單色背景色 */
    --bg-color: #F5F5F9;
    --bg-color-alpha90: rgba(245, 245, 249, 0.9);
    /* 漸層背景色_1 */
    --linear-bg-1-color: #F8F8FA;
    /* 漸層背景色_2 */
    --linear-bg-2-color: #EAEAEE;
    /* 介面本身背景色 */
    --ui-bg-color: #FFFFFF;
    /* 介面搜尋元件背景色 */
    --ui-search-bg: #F5F5F5;
    --ui-search-hover-bg: #EAEAEA;
    /* 介面按鈕元件背景色 */
    --ui-button-bg: transparent;
    --ui-button-hover-bg: #F5F5F5;
    /* 面板內部背景色 */
    --skin-inset-bg-color: #F8F8FA;
    /* 面板本身背景色 */
    --skin-outer-bg-color: #FFFFFF;
    /* 卡片本身背景色 */
    --app-card-bg: #FFFFFF;
    --app-card-hover-bg: rgba(255, 255, 255, 0.9);
    --app-card-text: #393D3F;

    --workflow-skin-bg: #FFFFFF;
    --workflow-skin-side-bg: #F6F7F8;
    --workflow-card-bg: #FFFFFF;
    --workflow-card-hover-bg: #F0F0F0;
    --workflow-add-btn-bg: #CDCDD1;
    --workflow-add-btn-hover-bg: #393D3F;
    --workflow-add-btn-icon: #F5F5F9;
    --btn-hover-bg: rgba(0, 0, 0, 0.06);

    /*-------------------- Shadow --------------------*/

    /* 內陰影顏色 */
    --theme-inset-shadow-color: #6B72801a;
    /* 外陰影顏色 */
    --theme-outer-shadow-color: #6B72804d;

    /* 面板內陰影 */
    --skin-inset-shadow: 0px 5px 8px var(--theme-inset-shadow-color) inset;
    /* 面板外陰影 */
    --skin-outer-shadow: 0px 2px 8px var(--theme-outer-shadow-color);
    /* 卡片內陰影 */
    --card-inset-shadow: 0 2px 8px var(--theme-inset-shadow-color) inset;
    /* 卡片外陰影 */
    --card-outer-shadow: 0px 1px 4px var(--theme-outer-shadow-color);
    


    --app-card-hover-translateY: translateY(-2.5px);
    --skin-title: #2B2B2B;

    /* 表單設計頁面 Form Design */
    /* 這頁面的參數管理另外寫在src/pages/widgetConfig/index.less */
}

html body {
    color: var(--dark-text);
}

.niio-backgroud {
    background-image: linear-gradient(var(--linear-bg-1-color) 0%, var(--linear-bg-2-color) 100%);
}

.niio-skin {
    border-radius: var(--skin-outer-radius);
    background-color: var(--skin-outer-bg-color);
    box-shadow: var(--skin-outer-shadow);
}

.niio-skin-inset {
    position: relative;
    width: 100%;
    border-radius: var(--skin-inner-radius);
    background-color: var(--skin-inset-bg-color);
}

.niio-skin-inset:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--skin-inner-radius);
    box-shadow: var(--skin-inset-shadow);
    pointer-events: none;
}


[data-theme='dark'] {
    --bg-color: #000000;
    --bg-color-alpha90: rgba(24, 24, 24, 0.9);
    --ui-bg-color: #000000;
    --ui-search-bg: #282828;
    --ui-search-hover-bg: #1C1C1C;
    --ui-button-bg: transparent;
    --ui-button-hover-bg: #282828;
    --skin-inset-bg-color: #000000;
    --skin-outer-bg-color: #000000;
    --app-card-bg: #1c1c1c;
    --app-card-hover-bg: #393939;
    --app-card-text: #E6E6E6;
    --app-card-outer-shadow: unset;
    --workflow-skin-bg: #181818;
    --workflow-skin-side-bg: #2C2C2C;
    --workflow-card-bg: #2C2C2C;
    --workflow-card-hover-bg: #181818;
    --workflow-add-btn-bg: #2C2C2C;
    --workflow-add-btn-hover-bg: #393D3F;
    --workflow-add-btn-icon: #000000;
    --btn-hover-bg: rgba(255, 255, 255, 0.06);

    --cell-bg: #313238;
    --sheet-head-bg: #161616;
    --sheet-sidebar-bg: #161616;
    --sheet-sidebar-border: 1px solid #313238;
    --sheet-viewsbar-bg: #313238;
    --sheet-toolbar-bg: #3D4145;
    --sheet-skin-border: 1px solid #313238;
    --cell-border: 1px solid #161616;
    --sheet-viewsbar-bottom: 1px solid #161616;
    --table-top-border: 1px solid #161616;
    --sheet-sum-bg: #090909;
    --sheet-sum-bg-hover: #1C1C1C;
    --sheet-bg: #161616;
    --sheet-board-bg: #161616;

    --sheet-gallery-bg: #161616;
    --sheet-gallery-top-border: 1px solid #161616;

    --sheet-calendar-weekhead-bg: #000000;
    --sheet-calendar-toolbar-bg: #161616;
    --sheet-calendar-sidebar-bg: #161616;
    --sheet-calendar-sidebar-border: 1px solid #161616;
    --sheet-calendar-sidebar-border-color: #161616;
    --sheet-calendar-cell-bg-open: #2C2C2C;
    --sheet-calendar-cell-bg-close: #161616;
    --sheet-calendar-cell-text-close: #9CA3AF;
    
    --sheet-detail-bg: #161616;
    --sheet-record-tool-bg: #161616;

    --cell-border-color: #313238;

    --form-input-bg: #1e1e1e;
    --form-input-border: 1px solid #313238;
    --form-input-border-color: #313238;
    --toggle-radio-bg: #1e1e1e;
    --toggle-radio-item-bg: #313238;

    --button-border: 1px solid #313238;
    --button-border-hover-bg: #313238;

    --sheet-gallery-cover: #313238;
    --card-bg: #000000;
    --sheet-record-bg: #161616;
    --sheet-border-color: #313238;
    --sheet-border: 1px solid #313238;

    --tag-member-bg: #000000;

    --skin-title: #FFFFFF;

    --sheet-resourceview-bg: #161616;
    --sheet-resourceview-bg-dark: rgba(232, 234, 243, 0.05);

    --sheet-detail-list-bg: #161616;
    --sheet-detail-list-item-border: 1px solid #313238;
    --sheet-detail-list-item-bg: #1e1e1e;

    --sheet-gunter-sidebar-bg: #202020;
    --sheet-gunter-bg: #202020;

    --sheet-cardview-more-hover: rgba(255, 255, 255, 0.1);
    --sheet-cardview-more-border-hover: 1px solid rgba(255, 255, 255, 0.1);
}

html body[data-theme='dark'] {
    color: var(--light-text);
}

body[data-theme='dark'] .niio-backgroud {
    background-image: unset;
}

body[data-theme='dark'] .niio-skin {
    border: 1px solid var(--theme-outer-shadow-color);
}

body[data-theme='dark'] .niio-skin-inset {
    background-color: var(--theme-inset-shadow-color);
}

body[data-theme='dark'] .niio-skin-inset:after {
    box-shadow: var(--skin-inset-shadow);
}

.middle-text {
    color: var(--middle-text);
}

/* #app .input {
    border: var(--form-input-border);
    box-shadow: none;
    outline: none;
    &:hover {
        border-color: var(--form-hover-border);
    }

    &:disabled {
        background: var(--form-disabled-bg);
        color: var(--form-disabled-fg);
        border: var(--form-disabled-border);
        cursor: not-allowed;
    }
}

#app .input:focus {
    border-color: var(--form-focus-border-color);
    box-shadow: var(--form-focus-shadow-ring);
}

#app .input::placeholder {
    color: var(--form-input-placeholder);
} */

.dashboardCardContent {
    padding: 10px;
    height: 100%;
    overflow: hidden;
}

.workSheetNewRecord > .ant-modal-content {
    background-color: var(--sheet-record-tool-bg);
}