/* 全局样式 */
body {
    background-color: #f8f9fa;
    font-family: Arial, sans-serif;
    color: #333;
}

h1, h2 {
    text-align: center;
    color: #007bff;
}



.container {
    margin-top: 80px;
    padding: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;   /* 建议加上，避免padding影响布局 */
}

/* 全体を管理する箱：中身を中央に並べる */
.form-elements {
    display: flex !important;
    flex-direction: row !important; /* 基本は横並び */
    flex-wrap: wrap !important;    /* 入りきらない分（PDFボタン）を下へ */
    justify-content: center !important; /* ★これが左右の中央寄せ★ */
    align-items: center !important;     /* 上下の中心を揃える */
    gap: 15px;
    width: 100% !important;
    max-width: none !important;     /* 幅の制限を解除 */
    margin: 30px auto !important;   /* 外側の余白で中央配置を補強 */
    text-align: center;             /* 万が一のための保険 */
}

/* 1. 化学品選択の箱：幅を100%から「自動」に変えるのがコツ */
/* 2. 化学品選択ボックスの箱 */
.chemical-select {
    display: flex !important;
    width: auto !important;         /* ★100%だと左に寄るため、autoに強制変更 */
    max-width: fit-content !important;
    justify-content: center !important;
    margin: 0 !important;           /* 余計なマージンを排除 */
}

/* 调整下拉框 */
.chemical-select select {
    flex-grow: 1; /* 让下拉框自动占满可用空间 */
    max-width: 100%; /* 防止超出容器 */
    padding: 10px 12px; /* 内边距，增加上下左右的留白 */
    font-size: 16px; /* 字体大小 */
    border: 1px solid #ccc; /* 下拉框边框 */
    border-radius: 4px; /* 圆角 */
    background-color: #fff; /* 背景色 */
    box-sizing: border-box; /* 确保内边距不影响宽度 */
    /*appearance: none; !* 隐藏浏览器默认样式 *!*/
}

/* 调整下拉框选项的样式 */
.chemical-select select option {
    white-space: nowrap; /* 防止选项内容换行 */
    text-align: center; /* 选项文字左对齐 */
}

/* 焦点样式 */
.chemical-select select:focus {
    border-color: #007bff; /* 焦点时的边框颜色 */
    outline: none; /* 移除默认焦点样式 */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 焦点时的阴影效果 */
}

button:hover {
    background-color: #0056b3; /* 悬停时背景色 */
}


/* 调整提交按钮 */
.submit-button {
    padding: 10px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: 1px solid #ccc;   /* 添加边框，确保与下拉菜单一致 */
    border-radius: 5px;
    cursor: pointer;
    height: auto;  /* 自动高度 */
}
/* 2. PDFアップロードの箱：ここだけ「強制的に改行」させる */
.pdf-upload {
    flex-basis: 100% !important;    /* ★横幅を100%占有させて、強制的に改行させる */
    display: flex !important;
    justify-content: center !important; /* 2段目の中で中央寄せ */
    margin-top: 10px !important;
}

/* 3. 送信ボタン：高さをセレクトボックスに合わせる */
.submit-button {
    width: auto !important;
    white-space: nowrap !important; /* ボタン内の文字が改行されるのを防ぐ */
}

/* Hide the default file input */
#pdf-file {
    display: none;
}

/* Style the label to look like a button or any custom interface */
.pdf-label {
    cursor: pointer;
    /* Add your styling here */
}

/* Style for displaying the selected file name */
.file-name {
    /* Add your styling here */
}



/* 上传容器样式 */
.upload-container {
    display: inline-flex; /* 使用 inline-flex 保证外框宽度随内容调整 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 10px 20px; /* 内边距，控制框的大小 */
    border: 2px solid #ccc; /* 边框颜色 */
    border-radius: 5px; /* 边框圆角 */
    background-color:  #ffffff; /* 背景颜色 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* 添加悬停效果 */
}

/* 图标样式 */
.upload-icon {
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
    margin-right: 8px; /* 图标与文字之间的间距 */
}

/* 上传文字样式 */
.upload-text {
    font-size: 16px; /* 文字大小 */
    color: #333; /* 文字颜色为黑色 */
    font-weight: 500; /* 适当加粗文字 */
    text-decoration: none; /* 移除下划线 */
}

/* 悬停效果 */
.upload-container:hover {
    background-color: #e6e6e6; /* 悬停时背景变灰 */
    border-color: #aaa; /* 边框颜色加深 */
}


.file-upload-label input[type="file"] {
    display: none;
}

.file-chosen {
    font-size: 16px;
    color: #333;
}

/* 已上传 PDF 的指示器样式 */
.uploaded-pdf {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
}

.uploaded-pdf a {
    color: #007bff;
    text-decoration: none;
}

.uploaded-pdf a:hover {
    text-decoration: underline;
}
.chart-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中（如果需要） */
    width: 100%;
    overflow: hidden;        /* 隐藏超出容器的内容 */
    margin-top: 20px;        /* 根据需要添加外边距 */
}

.chart-container img {
    max-width: 100%; /* 图片最大宽度为容器的 100% */
    height: auto;    /* 高度自动调整，保持比例 */
}


/* 修改 .language-switcher 样式，使用绝对定位，避免被遮挡 */
.language-switcher {
    position: absolute;                /* 改为绝对定位 */
    top: 20px;                         /* 距离顶部 15px */
    right: 130px;                       /* 距离右侧 20px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 语言切换按钮的样式 */
.language-button {
    display: inline-flex;              /* 使用 inline-flex 布局 */
    align-items: center;               /* 垂直居中 */
    cursor: pointer;                   /* 鼠标悬浮时显示手型 */
    background-color: transparent;     /* 背景透明 */
    border: none;                      /* 去掉按钮边框 */
    padding: 5px 10px;                /* 内边距，增加左边距 */
    color: #333;                       /* 按钮文字颜色 */
    font-size: 16px;                   /* 按钮文字大小 */
    font-weight: normal;                 /* 加粗字体 */
}

/* 去掉默认的按钮点击外框 */
.language-button:focus {
    outline: none;
}

/* 定义图标样式 */
.language-icon {
    width: 20px;                       /* 图标宽度 */
    height: 20px;                      /* 图标高度 */
    margin-right: 5px;                 /* 图标与文字之间的间距 */
}

/* 下拉菜单样式 */
.language-dropdown {
    display: none;
    position: absolute;               /* 绝对定位 */
    top: 50px;                        /* 相对于 .language-switcher 顶部的距离 */
    left: auto;                       /* 使用 left 属性 */
    right: 0;                         /* 与右侧对齐 */
    background-color: #007bff;        /* 背景颜色 */
    border: none;                     /* 去掉边框 */
    border-radius: 0;                 /* 移除圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    padding: 0;                       /* 去掉内边距 */
    width: auto;                      /* 设置宽度为自动 */
    min-width: 120px;                 /* 设置最小宽度，防止过窄 */
    z-index: 2000;                    /* 确保在最上层 */
}


/* 语言选项样式 */
.language-option {
    display: block; /* 每个选项独占一行 */
    width: 100%; /* 确保选项占满整个下拉菜单的宽度 */
    padding: 8px; /* 增加内边距 */
    border: none; /* 移除边框 */
    background-color: #007bff; /* 背景色 */
    color: white; /* 文字颜色 */
    text-align: center; /* 水平居中 */
    font-size: 14px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬浮样式 */
    box-sizing: border-box; /* 防止 padding 影响宽度 */
    border-bottom: 1px solid #ccc;  /* 下拉菜单选项之间添加细分隔线 */
}

/* 确保第一个和最后一个选项的边距一致 */
.language-option:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.language-option:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}


/* 悬浮时语言选项的样式 */
.language-option:hover {
    background-color: #0056b3;         /* 背景颜色加深 */
}
/* 导航栏样式 */
/* 导航栏默认一行，右对齐 */
.navbar {
    width: 100%;
    min-height: 50px;
    border-bottom: 1px solid #ddd;
    background-color: transparent;
    display: flex;
    justify-content: flex-end; /* 右对齐 */
    align-items: center;
    padding: 0 60px;
    box-sizing: border-box;
    z-index: 1000;
}

/* 大屏幕时绝对定位（如有需要），示例 */
.language-switcher {
    position: absolute;
    top: 20px;
    right: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============= 小屏幕媒体查询 ============= */
@media only screen and (max-width: 600px) {


    .container {
        max-width: none;      /* 不再限制 800px */
        width: 90%;           /* 占屏幕的 90% */
        margin: 0 auto;       /* 自动居中 */
        padding: 10px;        /* 可酌情减小内边距 */
    }

    .navbar {
        /* 仍然保持 row，让按钮在右侧 */
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding: 10px;   /* 减少边距 */
        position: relative; /* 确保下方 language-switcher 不越界 */
    }

    .language-switcher {
        position: static;    /* 重置为非绝对定位 */
        margin-left: auto;   /* 如果想让它紧贴右边，可加：margin-left: auto; */
        margin-top: 0;       /* 清除之前 top: 20px; */
    }



    /* pdf-upload 小屏幕更紧凑 */
    .pdf-upload {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .upload-container {
        width: auto;   /* 或 80% */
        padding: 8px 12px; /* 减小内边距 */
        margin: 0 auto;
    }

    /* chemical-select 小屏幕下垂直排列 */
    .chemical-select {
        flex-direction: column;
        gap: 10px;
        justify-content: center; /* 保持元素居中 */
    }

    .chemical-select select,
    .chemical-select .submit-button {
        width: 90%;
    }
}