@charset "UTF-8";

.reit-main-container {
    display: flex;
    gap: 20px;
    max-width: 100%;
    margin: 30px auto;
    /* 核心修改：让子元素从左侧开始排列，不留中间空白 */
    justify-content: flex-start;
    align-items: flex-start; /* 保持垂直方向的顶部对齐 */
    gap: 20px; /* 使用 CSS 新属性 `gap` 来创建间距，这是现代且推荐的做法 */
    /* 或者使用 margin 来代替 gap */
}


.reit-left {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;

    /* 核心修改：让容器变成悬浮状态 */
    position: sticky;
    top: 150px; /* 滚动到距离顶部20px时，左侧容器会固定在这里 */
    height: fit-content; /* 确保容器高度只包裹内容 */
}

.reit-right {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;

}

.reit-calculator-container {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
}

/* 优化标题样式 */
.reit-calculator-container h1 {
    /* 调整标题字体大小，使用相对单位 em 或 rem 更好 */
    font-size: 1.5em; /* 从默认的 2em 或更大降到 1.8em */
    font-weight: 600; /* 加粗，但不像 bold 那么粗 */
    color: #2c3e50; /* 深灰色，与背景色搭配更协调 */
    margin-bottom: 20px; /* 增加底部间距，与下面内容拉开距离 */
    text-align: center; /* 居中显示，视觉上更平衡 */
    border-bottom: 2px solid #eee; /* 添加下划线，增强视觉分隔 */
    padding-bottom: 10px; /* 下划线与文字的间距 */
}


.reit-result-container {
    overflow-x: auto;
    background: #f9f9f9;
    border-radius: 4px; /* 增加圆角，让容器更柔和 */
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    padding: 20px;
    /* 新增：优化字体和行高 */
    line-height: 1.6;
    /* 核心：添加立体的多层阴影 */
    /* 第一层: 轻微的投影，增加立体感 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    /* 第二层: 更广、更柔和的阴影，让卡片有漂浮感 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* 调整标题样式 */
.reit-result-container h2 {
    color: #2c3e50; /* 深灰色，比黑色更柔和 */
    font-size: 2em; /* 保持较大的标题字号 */
    margin-bottom: 10px;
}

.reit-result-container h3 {
    color: #34495e; /* 次级标题颜色 */
    font-size: 1.4em; /* 次级标题字号 */
    margin-top: 20px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}


.reit-form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    position: relative;
}

.reit-form-row label {
    font-weight: 600;
    margin-bottom: 6px;
}

.reit-form-row input {
    padding: 8px;
    font-size: 0.95em;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.reit-form-row input:focus {
    border-color: #0073aa;
    outline: none;
}

/* 3. 输入框 (input) 和下拉菜单 (select) 的通用样式 */
/* 为了让它们看起来风格统一 */
.reit-form-row input[type="text"],
.reit-form-row select {
  box-sizing: border-box; /* 确保 padding 不会撑大宽度 */
  width: 100%;
  padding: 12px 15px;
  font-size: 16px;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  outline: none; /* 移除默认的焦点轮廓 */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 交互效果：鼠标悬停或聚焦时 */
.reit-form-row input[type="text"]:hover,
.reit-form-row select:hover {
  border-color: #a9b3be;
}

.reit-form-row input[type="text"]:focus,
.reit-form-row select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); /* 添加一个漂亮的发光效果 */
}

/* 4. 自定义下拉菜单的样式 */
.reit-form-row select {
  /* 移除系统默认箭头 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 使用 SVG 背景图作为自定义箭头 */
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 1em;
  padding-right: 40px; /* 为箭头留出空间，防止文字重叠 */
  cursor: pointer;
}
.reit-submit {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
}

.reit-disabled {
    background-color: #eee !important;
    color: #999 !important;
    cursor: not-allowed;
}

.reit-scroll-container {
    overflow-x: auto;
    padding: 10px;
    margin: 15px 0;
    background-color: #fff;
    border-radius: 4px;
    -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
    width: 100%;               /* 填满父容器 */
    border: none;
    min-width: 0; /* 允许 flex 子元素正确滚动 */
}

.reit-scroll-container table {
    width: auto;
    /*min-width: 100%;*/
    border-collapse: collapse;
    /* 核心：为表格添加圆角 */
    border-radius: 4px;
    /* 核心：为表格添加阴影 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    /* 确保表格的圆角不被子元素覆盖 */
    overflow: hidden; 
    text-align: right !important; /* 设置容器内的文本默认右对齐 */


}

/* 仅覆盖第一列的对齐方式，让它左对齐 */
.reit-scroll-container thead th:first-child,
.reit-scroll-container tbody td:first-child {
    text-align: left;
}


/* 优化表格行交替颜色，增加可读性 */
.reit-scroll-container tbody tr:nth-child(even) td {
    background-color: #eef3f7;
}

/* 鼠标悬停在行上时的高亮效果 */
.reit-scroll-container tbody tr:hover td {
    background-color: #f5f5f5;
}

.reit-scroll-container th {
    padding: 8px 12px;
    white-space: nowrap;
    border: 1px solid #eee;
    font-size: 14px;

}
.reit-scroll-container td {
    padding: 8px 12px;
    white-space: nowrap;
    border: 1px solid #eee;
    font-size: 14px;
}

.reit-section-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}
    #reit-code-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #ccc;
        border-top: none;
        max-height: 200px;
        overflow-y: auto;
        display: none;
        z-index: 99;
    }
    #reit-code-suggestions div {
        padding: 6px 10px;
        cursor: pointer;
        border-top: 1px solid #eee;
    }
    #reit-code-suggestions div:hover {
        background: #f0f0f0;
    }


/* 优化 按钮的样式 */
.button {
    border-radius: 4px !important; /* 可以根据你的喜好调整圆角大小 */
    /* 核心：为按钮添加上外边距 */
    margin-top: 20px; /* 你可以根据需要调整这个值 */
    padding: 12px 24px !important;
    color: #FFFFFF;
    background-color: #0056b3;
 
}

.button:hover {
  transform: translateY(-4px) !important; /* 按钮向上移动2像素 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important; /* 阴影变大，感觉更突出 */
}

/* 优化 按钮的样式 */
.reit-submit {
    border-radius: 4px !important; /* 可以根据你的喜好调整圆角大小 */
    padding: 12px 24px !important;
    border: none !important; /* 移除默认边框，很重要 */
    cursor: pointer !important; /* 鼠标悬停时显示手形光标 */
    outline: none !important; /* 移除点击时的焦点轮廓线 */
    /* 1. 添加了初始阴影 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) ; 
    /* 2. 添加了平滑过渡效果，让所有变化在0.2秒内完成 */
    transition: all 0.2s ease-in-out ; 
}

/* 鼠标悬停时的样式 */
.reit-submit:hover {
  transform: translateY(-2px); /* 按钮向上移动2像素 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 阴影变大，感觉更突出 */
}

.reits-result-container {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin: 1em 0;
    
    /* 核心：定义四列网格 */
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr) auto;
    gap: 10px 20px; /* 行和列间距 */
    border-bottom: 1px solid #f0f0f0;
}

/* 头部样式：明确让它们占据特定列 */
.reits-result-header-left {
    grid-column: 1 / span 2; /* 占据前两列 */
    font-weight: 900;
    border-bottom: 2px solid #ccc;
    padding-bottom: 8px;
    font-size: 20px;
}
.reits-result-header-right {
    grid-column: 3 / span 2; /* 占据后两列 */
    font-weight: bold;
    text-align: right;
    border-bottom: 2px solid #ccc;
    padding-bottom: 8px;
}

/* 为每个数据项定义网格位置 */
.reits-result-container .reits-result-label:nth-child(4n-1) {
    grid-column: 1; /* 左侧标签占据第一列 */
    text-align: left;
}
.reits-result-container .reits-result-value:nth-child(4n) {
    grid-column: 2; /* 左侧值占据第二列 */
    text-align: right;
    font-weight: 500;
}
.reits-result-container .reits-result-label:nth-child(4n+1) {
    grid-column: 3; /* 右侧标签占据第三列 */
    text-align: left;
}
.reits-result-container .reits-result-value:nth-child(4n+2) {
    grid-column: 4; /* 右侧值占据第四列 */
    text-align: right;
    font-weight: 500;
}

/* 禁用行的颜色 */
.disabled-row {
    color: #aaa;
}
/* 边界样式 */
.reits-result-container > div {
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 0;
}
.reits-result-container > div:nth-last-child(-n+4) {
    border-bottom: none;
}

/* 为每个值添加一个盒子样式，并实现居中对齐 */
.value-box {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    width: 100%; /* 核心：让框填满网格列 */
    box-sizing: border-box; /* 确保 padding 不会撑大宽度 */
}

/* 让输入框和提示图标并排 */
.input-with-tooltip-container {
    display: flex;
    align-items: center;
    gap: 8px; /* 输入框和问号图标之间的间距 */
}

/* 问号图标容器的样式 */
.tooltip-icon-container {
    position: relative; /* 关键：为子元素tooltip-text提供定位上下文 */
    display: inline-block;
}

/* 问号图标本身的样式 */
.tooltip-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #0056b3;
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    cursor: pointer;
}

/* 悬浮提示文本的样式 */
.tooltip-text {
    visibility: hidden; /* 默认隐藏 */
    opacity: 0; /* 默认透明 */
    width: 250px; /* 提示框宽度 */
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute; /* 关键：相对于父元素定位 */
    z-index: 100;
    bottom: 125%; /* 提示框显示在图标上方 */
    left: 50%;
    margin-left: -125px; /* 水平居中 */
    transition: opacity 0.3s; /* 悬浮时的过渡效果 */
}

/* 悬浮提示的小箭头 */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* 悬停时显示提示 */
.tooltip-icon-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* 高亮时的样式，字体和背景同时变化 */
.value-box.highlight-change {
    /* 马卡龙蓝色背景 */
    background: #0056b3; 
    /* 将字体颜色变为白色，以提供良好的对比度 */
    color: #fff; 
    /* 增加内部阴影，模拟发光效果 */
    box-shadow: inset 0 0 5px rgba(0, 188, 212, 0.6);
    /* 让高亮、阴影和字体颜色效果慢慢出现 */
    transition: background 1s ease-out, box-shadow 1s ease-out, color 1s ease-out;
}

/* 延迟移除高亮，让效果持续更久 */
.value-box:not(.highlight-change) {
    transition: background 3s ease-in, box-shadow 3s ease-in, color 3s ease-in;
}

/* 模态框背景 */
.reit-modal {
    display: none; /* JavaScript 控制显示 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 模态框内容 */
.reit-modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: auto;               /* 最大 90% 宽度 */
    max-width: 90%;           /* 保证不会超过屏幕 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
    border-radius: 8px;
    position: relative;
    box-sizing: border-box;
}

/* 关闭按钮 */
.reit-modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.reit-modal-close:hover,
.reit-modal-close:focus {
    color: black;
}

/* 表格外层容器（支持横向滚动） */
.reit-modal-table-container {
    overflow-x: auto;
    padding: 10px;
    margin: 15px 0;
    background-color: #fff;
    border-radius: 4px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* 表格 */
.reit-modal-table-container table {
    border-collapse: collapse;
    width: max-content;   /* 宽度跟内容走 */
    min-width: 0;      /* 至少撑满容器 */
    table-layout: auto;   /* 根据内容分配列宽 */
}

/* 表头和单元格 */
.reit-modal-table-container th,
.reit-modal-table-container td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: right;   /* 全部靠右 */
    white-space: nowrap; /* 不换行，保持表格横向滚动 */
    font-size: 14px;
    background-color: #fff; /* 保持原有颜色 */
}

/* 表头特殊样式 */
.reit-modal-table-container th {
    background-color: #0056b3;
    color: #fff;
}

/* 输入框 */
.reit-modal-table-container input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    border: none;
    text-align: right;
    font-size: 14px;
}

/* 底部按钮 */
.reit-modal-buttons {
    text-align: right;
    margin-top: 20px;
}

.edit-icon {
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    margin-left: 8px; /* 和前面的文字隔开一点距离 */
    display: inline-block; /* 提高稳定性 */
}

/* 增加一个简单的悬停效果 */
.edit-icon:hover {
    opacity: 0.7;
}

/* --- 1. 让禁用的输入框字体变灰，并显示“禁止”光标 --- */
.reit-modal-table-container input:disabled {
    color: #999; /* 灰色字体 */
    background-color: #f0f0f0; /* 更浅的灰色背景，以示区别 */
    cursor: not-allowed; /* 鼠标悬停时显示“禁止”图标 */
}

/* --- 2. 为禁用的单元格添加“年报数据”悬浮提示窗 --- */

/* 步骤 A: 给作为容器的单元格设置相对定位 */
.disabled-cell-tooltip {
    position: relative; /* 这是让悬浮窗相对于单元格定位的关键 */
}

/* 步骤 B: 使用 ::after 伪元素创建悬浮窗，默认隐藏 */
.disabled-cell-tooltip::after {
    content: "年报数据"; /* 悬浮窗的文字内容 */
    
    /* 外观样式 */
    background-color: #333; /* 背景色 */
    color: #fff; /* 文字颜色 */
    padding: 5px 10px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    font-size: 12px;
    white-space: nowrap; /* 防止文字换行 */
    
    /* 定位样式 */
    position: absolute;
    bottom: 100%; /* 出现在单元格的正上方 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%) translateY(-5px); /* 微调位置，向上移动5px */
    z-index: 10; /* 确保在最上层显示 */
    
    /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; /* 平滑过渡效果 */
}

/* 步骤 C: 当鼠标悬停在单元格上时，显示悬浮窗 */
.disabled-cell-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}