/* ================================= 全局基础样式 ================================= */
/* 主容器VBox：控制整体间距与背景 */
VBox {
    -fx-background-color: white; /* 白色背景，符合对话框简洁风格 */
    -fx-padding: 20px; /* 内边距20px，避免内容贴边 */
    -fx-spacing: 15px; /* 组件间间距15px，层次分明 */
    -fx-border-color: #DEE2E6; /* 浅灰边框，区分对话框与主界面 */
    -fx-border-width: 1px;
    -fx-border-radius: 8px; /* 轻微圆角，避免尖锐 */
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.15), 8, 0, 0, 3); /* 柔和阴影，提升立体感 */
}

/* 统一字体：适配中文，避免系统字体混乱 */
* {
    -fx-font-family: "Microsoft YaHei", "SimHei", "sans-serif";
    -fx-font-size: 14px; /* 基础字体大小，保证可读性 */
}


/* ================================= 标题样式（“设置”Label） ================================= */
/* 标题Label：突出显示，区分标题与内容 */
Label[text="设置"] {
    -fx-font-size: 21px; /* 按FXML要求保持21px字号 */
    -fx-font-weight: bold;
    -fx-text-fill: #212529; /* 深灰文本，庄重不刺眼 */
    -fx-padding: 5px 0 10px 0; /* 上下内边距，增加标题与下方内容的距离 */
    -fx-border-color: #DEE2E6;
    -fx-border-width: 0 0 1px 0; /* 底部浅灰边框，分隔标题与设置项 */
}


/* ================================= 网格布局（GridPane）样式 ================================= */
/* 网格容器：控制设置项的整体排列 */
GridPane {
    -fx-hgap: 10px; /* 列间距10px，避免标签与输入框拥挤 */
    -fx-vgap: 8px; /* 行间距8px，优化垂直紧凑度 */
    -fx-alignment: CENTER_LEFT; /* 内容左对齐，符合阅读习惯 */
}

/* 单位标签（“秒”）：统一样式，与输入框对齐 */
GridPane Label[text="秒"] {
    -fx-text-fill: #6C757D; /* 浅灰文本，次要信息弱化 */
    -fx-alignment: CENTER_LEFT;
    -fx-padding: 0 0 0 5px; /* 左内边距5px，与Spinner拉开微小距离 */
}


/* ================================= 输入组件样式 ================================= */
/* 1. 数值选择器（Spinner）：优化外观与交互 */
Spinner {
    -fx-pref-width: 94px; /* 按FXML列宽适配，避免拉伸 */
    -fx-border-color: #DEE2E6; /* 浅灰边框，统一风格 */
    -fx-border-radius: 4px;
    -fx-background-color: white;
}

/* Spinner聚焦时：突出边框，提示当前激活状态 */
Spinner:focused {
    -fx-border-color: #80BDFF; /* 浅蓝色边框，符合主流UI聚焦反馈 */
    -fx-border-width: 2px;
    -fx-effect: none; /* 移除默认聚焦阴影，避免冲突 */
}

/* Spinner按钮（上下箭头）：优化尺寸与颜色 */
Spinner .increment-arrow-button,
Spinner .decrement-arrow-button {
    -fx-background-color: #F8F9FA; /* 浅灰背景，区分按钮区域 */
    -fx-border-color: #DEE2E6;
    -fx-border-width: 0 0 0 1px; /* 仅左侧边框，分隔输入区与按钮区 */
}

/* Spinner箭头图标：加深颜色，提高辨识度 */
Spinner .increment-arrow,
Spinner .decrement-arrow {
    -fx-background-color: #495057;
}


/* 2. 复选框（CheckBox）：优化选中状态与间距 */
CheckBox {
    -fx-text-fill: #495057; /* 中灰文本，与设置项标签一致 */
    -fx-padding: 5px 0; /* 上下内边距，增加与上下行的距离 */
    -fx-cursor: hand; /* 鼠标悬浮为手型，提示可点击 */
}

/* CheckBox选中时：自定义勾选颜色，突出激活状态 */
CheckBox:selected .box {
    -fx-background-color: #0D6EFD; /* 蓝色背景，与主界面按钮风格统一 */
}

/* CheckBox勾选图标：白色图标，与蓝色背景对比明显 */
CheckBox:selected .mark {
    -fx-background-color: white;
}


/* ================================= 按钮样式 ================================= */
/* 1. 恢复默认值按钮（resetB）：次要操作，风格弱化 */
Button#resetB {
    -fx-background-color: #F8F9FA; /* 浅灰背景，区分次要操作 */
    -fx-text-fill: #495057; /* 中灰文本 */
    -fx-border-color: #DEE2E6; /* 浅灰边框，增加轮廓感 */
    -fx-border-radius: 4px;
    -fx-background-radius: 4px;
    -fx-pref-width: 120px; /* 适配文本长度，避免按钮过短 */
    -fx-padding: 6px 12px;
    -fx-cursor: hand;
}

/* resetB hover效果：加深背景色，反馈明显 */
Button#resetB:hover {
    -fx-background-color: #E2E6EA;
    -fx-border-color: #D6D8DB;
}


/* 2. 取消按钮（cancelB）：中性操作，风格温和 */
Button#cancelB {
    -fx-background-color: white; /* 白色背景，中性风格 */
    -fx-text-fill: #495057; /* 中灰文本 */
    -fx-border-color: #DEE2E6; /* 浅灰边框 */
    -fx-border-radius: 4px;
    -fx-background-radius: 4px;
    -fx-pref-width: 100px; /* 按FXML要求保持100px宽度 */
    -fx-padding: 6px 12px;
    -fx-cursor: hand;
}

/* cancelB hover效果：背景色变浅，反馈清晰 */
Button#cancelB:hover {
    -fx-background-color: #F8F9FA;
}


/* 3. 保存按钮（saveB）：主要操作，突出显示 */
Button#saveB {
    -fx-background-color: #0D6EFD; /* 蓝色主按钮，与主界面导航按钮风格统一 */
    -fx-text-fill: white; /* 白色文本，对比明显 */
    -fx-border-color: #0D6EFD; /* 蓝色边框，强化轮廓 */
    -fx-border-radius: 4px;
    -fx-background-radius: 4px;
    -fx-pref-width: 100px; /* 按FXML要求保持100px宽度 */
    -fx-padding: 6px 12px;
    -fx-cursor: hand;
}

/* saveB hover效果：加深背景色，提升交互感 */
Button#saveB:hover {
    -fx-background-color: #0B5ED7;
    -fx-border-color: #0A58CA;
}

/* saveB按压效果：移除多余阴影，模拟“按下”质感 */
Button#saveB:pressed {
    -fx-effect: none;
}


/* ================================= 按钮容器（HBox）样式 ================================= */
/* 按钮容器：控制按钮的对齐与间距 */
HBox {
    -fx-spacing: 15px; /* 按钮间间距15px，避免拥挤 */
    -fx-padding: 5px 0 0 0; /* 上内边距5px，与上方组件拉开距离 */
}

/* 恢复默认值按钮的容器（左侧HBox）：居中对齐 */
HBox[alignment="CENTER"] {
    -fx-padding: 5px 0 10px 0; /* 下内边距10px，增加与下方取消/保存按钮的距离 */
}