/* Sidebar toggle button (hidden on large screens) */
#sidebar-toggle {
    display: none;
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 10001;
    background: #2c3e50;
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
}

/* Responsive rules: collapse sidebar into top nav for narrow screens */
@media (max-width: 900px) {
    #sidebar-toggle {
        display: block;
    }

    .container {
        flex-direction: column;
        height: auto;
    }

    .sidebar {
        width: 100%;
        padding: 8px 12px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar h2 {
        display: none;
    }

    .sidebar a {
        margin: 0 8px;
        padding: 8px 10px;
        font-size: 0.95em;
    }

    .sidebar.collapsed {
        display: none;
    }

    .content {
        padding: 16px;
    }
}

/*
 * Extracted CSS from templates/management.html
 * Moved on 2025-10-27 to improve maintainability.
 * Keep this file focused on management page styles; if you want global styles,
 * consider splitting into main.css and management.css.
 */

.tabs {
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
}

.tablinks {
    background: #eee;
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    font-size: 1em;
    transition: background 0.2s, color 0.2s;
}

.tablinks.active {
    background: #2c3e50;
    color: #fff;
}

.tabcontent {
    background: transparent;
    padding: 20px;
    border-radius: 0 0 4px 4px;
    margin-top: -4px;
}

/* Safety: ensure tab panels have a visible minimum height and their own stacking context
   to avoid accidental collapse or being covered by fixed overlays. This is conservative
   and should not affect other pages. */
.tabcontent {
    position: relative;
    z-index: 1;
    min-height: 160px;
    /* give the panel some visible area even if children are collapsed */
}

/* No-JS fallback: when navigating to #tab1 / #tab2, reveal the panel */
.tabcontent:target {
    display: block !important;
}

.overview-card {
    /* Do not force cards to stretch and share an undefined parent height.
       Use content-sized cards so they get natural height; when horizontal
       layout is desired, the surrounding container controls sizing. */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 320px;
    background: #fff;
    border-radius: 8px;
    -webkit-box-shadow: 0 2px 8px #eee;
    box-shadow: 0 2px 8px #eee;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    /* give a conservative minimum height so empty cards are visible */
    min-height: 120px;
}

/* Ensure cards inside tabs sit above the tab panel background and common overlays */
.tabcontent .overview-card {
    position: relative;
    z-index: 2;
}

.overview-card .card-content {
    padding: 12px 20px;
    /* 略微减小内边距，降低卡片整体高度 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

/* 在诊断右栏中，允许内容（如雷达标签）溢出圆角卡片，可见不被裁�?*/
.diag-right .overview-card .card-content {
    overflow: visible;
}

.overview-card .card-title {
    font-size: 1.08em;
    font-weight: bold;
    background: #f8f9fa;
    padding: 10px 20px;
    border-bottom: 1px solid #f0f0f0;
    margin: 0;
}

/* Choices.js elements: ensure full-width and comfortable inner spacing */
#dominant-species-select,
#precious-species-select,
.choices,
.choices__inner,
.choices__list--multiple {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.choices__inner {
    padding: 6px 8px;
    /* Ensure the inner area has a comfortable min height when empty */
    min-height: 44px;
}

/* Limit the visible height of the Choices multi-select token list so the left column
   doesn't expand excessively. Users can scroll to see more selections. */
.choices__list--multiple {
    max-height: 96px;
    overflow-y: auto;
}

/* Page layout helpers moved from inline styles for clarity */
.page-layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 120px;
}

.cards-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Make the radar canvas responsive inside its card */
.chart-card canvas {
    width: 100%;
    /* 横向宽度较当前减�?% */
    /* �?JS 控制高度，更灵活避免裁剪；保底最小高�?*/
    min-height: 480px;
    height: auto;
    display: block;
}

.danger {
    background: #e74c3c;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    border: none;
}

.judge-good {
    color: #2ecc71;
    /* green */
    font-weight: 600;
}

.judge-warn {
    color: #f39c12;
    /* orange/yellow */
    font-weight: 600;
}

.judge-bad {
    color: #e74c3c;
    /* red */
    font-weight: 600;
}

/* Supplement card styling (responsive grid form) */
.supplement-form {
    display: grid;
    /* Make the left column slightly wider while keeping the right column compact. */
    grid-template-columns: minmax(280px, 720px) 320px;
    /* row-gap 16px, column-gap 32px */
    gap: 16px 32px;
    align-items: start;
    width: 100%;
}

@media (max-width: 900px) {
    .supplement-form {
        grid-template-columns: 1fr;
    }
}

.field-label {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
    /* Reduce spacing between label and input */
    color: #333;
}

/* Keep the left cell from visually stretching too wide on large screens */
.supplement-left {
    max-width: 700px;
}

/* Diagnostics two-column layout (left: list, right: radar) */
.diag-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.diag-left {
    flex: 2 1 60%;
}

.diag-right {
    /* 为雷达图预留更宽的横向空间，避免指示标签溢出（进一步加宽） */
    flex: 1.6 1 60%;
    min-width: 720px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.chart-card {
    width: 100%;
    /* 放宽最大宽度，便于显示较长的中文指标标�?*/
    max-width: none;
    /* 允许占满可用宽度 */
    /* allow a bit more horizontal room for larger radar */
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    /* 允许图形元素在容器边界外可见，避免标签被裁剪 */
    overflow: visible;
}

/* 允许右侧诊断卡片的内容溢出可见，避免 overview-card 的圆角裁剪标�?*/
.diag-right .overview-card {
    overflow: visible;
}

/* 经营迫切性右栏：将雷达卡片整体左移一些（不影响其他卡片） */
.diag-right .chart-card {
    margin-left: -10px;
}

/* 将雷达画布整体左�?5%（相对自身宽度），不改变大小 */
.diag-right .chart-card canvas {
    position: relative;
    left: -20px;
    width: 120%;
    /* 画布宽度增加20% */
}

/* 在较窄屏幕上改为上下排列，避免卡片横向挤压导致溢�?*/
@media (max-width: 1000px) {
    .diag-grid {
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .diag-right {
        min-width: 0;
        width: 100%;
        flex: 1 1 auto;
    }

    .chart-card {
        max-width: 100%;
    }
}

/* 在较宽屏幕下，确保右栏可以拿到更多空�?*/
@media (min-width: 1200px) {
    .diag-right {
        flex: 2 1 68%;
        min-width: 840px;
    }
}

/* Radar conclusion text above the chart */
.radar-conclusion {
    font-size: 1.05em;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: left;
    /* 左对齐经营迫切性说明与评分 */
    color: #2c3e50;
}

/* Small left padding so right-column inputs don't butt directly against the grid gap */
.supplement-right {
    padding-left: 8px;
}

.full-select,
.input-select,
.input-text {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 8px;
    /* 缩小垂直内边距，减少文本与边框距�?*/
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #fff;
    font-size: 0.9em;
    /* 略微减小字号以降低视觉高�?*/
    line-height: 1.25;
    /* 控制行高，避免多余空�?*/
}

.input-text {
    height: auto;
    /* 移除固定高度，按内容自适应 */
    min-height: 30px;
    /* 给一个舒适的最小高�?*/
}

/* 仅在林分信息补充的表单里进一步压缩控件高�?*/
.supplement-form .input-select,
.supplement-form .full-select,
.supplement-form .input-text {
    /* 增加垂直内边距，避免文字贴边被边框遮�?*/
    padding: 4px 10px;
    font-size: 0.9em;
    line-height: 1.3;
}

/* 多选下拉（Choices 或原�?multiple）限制高度但缩小单行占用 */
.supplement-form .choices__inner {
    /* 增加内边距与最小高度，避免 token 或占位文字与边框重叠 */
    padding: 6px 8px !important;
    min-height: 36px;
}

.supplement-form .choices__list--multiple {
    max-height: 80px;
    /* 降低展开后的高度 */
}

/* 限制下拉列表展开高度，显示少量项目并出现滚动�?*/
.supplement-form .choices__list--dropdown {
    /* 仅显示约 3 个选项；仅外层滚动，避免双滚动�?*/
    max-height: 108px;
    overflow-y: auto;
}

/* 兼容部分版本�?Choices，将内部列表也限制高度并滚动 */
/* 仅使用外层滚动；内部列表不再单独滚动，避免出现两个滚动条 */
.supplement-form .choices__list--dropdown .choices__list {
    max-height: none;
    overflow: visible;
}

.supplement-form .choices__list--dropdown .choices__item {
    padding: 4px 8px;
    /* 紧凑项目高度 */
}

/* 原生 multiple 作为兜底：展开时也限制高度并可滚动 */
.supplement-form select[multiple] {
    max-height: 200px;
    overflow: auto;
}

/* 简易多选（�?Choices 时的兜底样式�?*/
.simple-multi {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.simple-multi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.simple-chip {
    background: #eef4ff;
    color: #2c3e50;
    border: 1px solid #d6e4ff;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 0.85em;
}

.chip-close {
    margin-left: 6px;
    cursor: pointer;
}

.simple-multi-toggle {
    align-self: flex-start;
    font-size: 0.85em;
    padding: 4px 8px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.simple-multi-dropdown {
    display: none;
    max-height: 108px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.simple-multi-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.simple-item {
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.simple-item:hover {
    background: #f5f7fa;
}

.simple-item.selected {
    background: #eaf4ff;
}

.form-actions {
    margin-top: 12px;
    text-align: right;
}

.btn-save {
    background: #2c3e50;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

/* Form layout helpers to avoid overflow in Safari / older browsers */
.card-content form {
    width: 100%;
}

.form-row,
.card-content>form div[style*="display:flex"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.form-row .label,
.card-content label {
    min-width: 90px;
    flex: 0 0 90px;
}

.form-row .control,
.card-content input,
.card-content select,
.card-content .control-wrap {
    flex: 1 1 auto;
    min-width: 0;
    /* allow shrinking in Safari */
}

/* Ensure inputs don't exceed their container and use border-box sizing */
.card-content input[type="number"],
.card-content input[type="text"],
.card-content select,
.card-content input[type="file"] {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* Fallback for browsers without flex gap support: add right margin to controls */
.no-flex-gap .form-row>* {
    margin-right: 24px;
}

@media (max-width: 900px) {

    /* stack label + control vertically on small screens */
    .form-row,
    .card-content>form div[style*="display:flex"] {
        -ms-flex-direction: column;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .form-row .label,
    .card-content label {
        flex: 0 0 auto;
        min-width: 0;
    }

    .form-row .control,
    .card-content input,
    .card-content select {
        width: 100%;
    }
}

/* Management score badge colors */
.score-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    margin-left: 8px;
    font-size: 0.95em;
}

.score-badge.good {
    background: #27ae60;
}

/* green */
.score-badge.ok {
    background: #f39c12;
}

/* yellow/orange */
.score-badge.poor {
    background: #e74c3c;
}

/* red */

/* Simple progress bar for management score */
.progress {
    width: 100%;
    background: #f1f1f1;
    border-radius: 8px;
    height: 12px;
    overflow: hidden;
    margin-top: 8px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    width: 0%;
    transition: width 400ms ease;
}

.progress-bar.ok {
    background: linear-gradient(90deg, #f1c40f, #f39c12);
}

.progress-bar.poor {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

/* Priority directions badges */
.priority-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.priority-badge {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Global box-sizing and overflow safety to avoid subtle differences between browsers */
html,
body {
    box-sizing: border-box;
    width: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* Prevent accidental horizontal scroll due to small rounding differences in mac browsers */
body {
    overflow-x: hidden;
}

/* Make the upload/overview area responsive and avoid fixed max-width stacking that causes overflow */
.overview-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Let cards shrink properly and prefer a reasonable minimum width */
.overview-flex>.overview-card,
.overview-flex>.upload-format-info {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 360px;
    flex: 1 1 360px;
    min-width: 280px;
}

/* Allow inner flex items to shrink on Safari (min-width:0 important) */
.overview-card .card-content,
.overview-card .card-content * {
    min-width: 0;
}

/* Make inline inputs more flexible so they don't push the row wider than the container */
.overview-card .card-content input[type="number"],
.overview-card .card-content select,
.overview-card .card-content input[type="file"] {
    width: auto !important;
    max-width: 100%;
    min-width: 0;
}

/* File input can be long on mac UI; constrain and allow wrapping */
.overview-card .card-content input[type="file"] {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reduce large horizontal padding on content to avoid overflow on narrower viewports */
.content {
    padding-left: clamp(16px, 4vw, 60px);
    padding-right: clamp(16px, 4vw, 60px);
}

/* Ensure the demo plot container doesn't force width; let Plotly be responsive */
#plot-demo {
    width: 100% !important;
    max-width: 100% !important;
}

/* Urgent card styling: matches supplement card width */
.urgent-card {
    flex: 0 0 66.666%;
    max-width: 66.666%;
}

@media (max-width:1100px) {
    .urgent-card {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

/* 演示模式相关样式已移�?(2025-11-20 cleanup) */