/* ==========================================================================
   Base Styles
   ========================================================================== */
html { font-size: 12px; }
html, body, #container { height: 100%; margin: 0; padding: 0; }
* { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5; font-weight: 300; color: #111213;
}
p { margin-top: 0; margin-bottom: 0; }
label { display: inline-block; margin-bottom: 0.4rem; font-size: 1rem; }
button, input, select { margin: 0; font-family: inherit; font-size: inherit; text-transform: none; }
input[type=checkbox] { transform: scale(1.2); margin: 0 0.5rem 0 0; cursor: pointer; }
.card-title { color: grey; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    transition: color .15s, background-color .15s, border-color .15s;
    background-color: transparent;
    color: #25A5F7;
    border-color: #25A5F7;
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    cursor: pointer;
    width: 100%;
}
.btn:hover {
    color: #fff;
    background-color: #25A5F7;
    border-color: #25A5F7;
    text-decoration: none;
}
.btn:focus { outline: 0; }
.btn-group { display: flex; gap: 0.5rem; width: 100%; }
.btn-group .btn { flex: 1; margin: 0; }

/* Cancel Button Variant */
.cancel-btn { background: #ccc; color: #333; border-color: #ccc; }
.cancel-btn:hover { background: #bbb; border-color: #bbb; color: #333;}

/* ==========================================================================
   Input Items & Forms
   ========================================================================== */
.input-item { display: flex; flex-wrap: wrap; align-items: center; width: 100%; height: 3rem; position: relative; }
.input-item:last-child { margin-bottom: 0; }
.input-item>select, .input-item>input[type=text] { flex: 1 1 auto; width: 1%; margin-bottom: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-item-prepend { margin-right: -1px; }
.input-item-text, input[type=text], select { height: calc(2.2rem + 2px); }
.input-item-text {
    width: 6rem; padding: 0.4rem 0.7rem; display: inline-block; text-align-last: justify;
    align-items: center; margin-bottom: 0; font-size: 1rem; color: #495057;
    background-color: #e9ecef; border: 1px solid #ced4da; border-radius: .25rem;
    border-bottom-right-radius: 0; border-top-right-radius: 0;
}
select, input[type=text] {
    display: inline-block; width: 100%; padding: .375rem .75rem; color: #495057;
    background: #fff; border: 1px solid #ced4da; border-radius: .25rem;
    appearance: none; outline: none;
}
select:focus, input[type=text]:focus { border-color: #80bdff; box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1); }
select { padding-right: 1.75rem; background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center; background-size: 8px 10px; }
.segment-toggle-item { margin-top: 0rem; }
.segment-toggle-item label { font-size: 1rem; color: #333; margin-bottom: 0; cursor: pointer;}

/* ==========================================================================
   Cards Positioning
   ========================================================================== */
.input-card {
    display: flex; flex-direction: column; background-color: #fff;
    width: 18rem; border-radius: 0.4rem; box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    padding: 0.75rem 1.25rem;
}
.right-panel-container {
    position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column;
    gap: 0.5rem; z-index: 100; pointer-events: none; width: 18rem; 
}
.right-panel-container .input-card { position: relative; pointer-events: auto; width: 100%; }
.input-card-4 { position: fixed; bottom: 1rem; right: 20rem; z-index: 100;}
#options-list { padding: 0; margin: 0; }
#options-list li { list-style: none; margin-bottom: 0.2rem;}

/* ==========================================================================
   Unified Modals
   ========================================================================== */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 9999; justify-content: center; align-items: center;
}
.modal-content {
    background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; max-width: 90vw;
}
.modal-header {
    margin-top: 0; color: #333; border-bottom: 1px solid #eee; 
    padding-bottom: 0.8rem; font-size: 1.3rem; font-weight: 500;
}
.modal-body { margin-top: 1rem; }
.modal-body.list-body { max-height: 50vh; overflow-y: auto; padding-right: 0.5rem; }
.modal-footer { margin-top: 1.5rem; text-align: right; display: flex; justify-content: flex-end; gap: 0.8rem; }
.modal-btn { width: auto; font-size: 1.1rem; padding: 0.4rem 1.2rem; border-radius: 0.4rem; }
.modal-label { font-size: 0.9rem; color: #666; margin-bottom: 0.2rem;}

/* ==========================================================================
   List Items (for Delete/Edit Modal)
   ========================================================================== */
.route-list-item {
    display: flex; align-items: center; margin-bottom: 0.8rem; cursor: pointer;
    border-radius: 4px; transition: background 0.2s;
}
.route-list-item:hover { background-color: #f5f5f5; }
.color-picker-input {
    display: inline-block; width: 22px; height: 24px; padding: 0; 
    border: 1px solid rgba(0,0,0,0.2); border-radius: 3px; 
    background-color: transparent; margin-right: 0.8rem; flex-shrink: 0; cursor: pointer;
}
.route-label { margin-bottom: 0; font-size: 1.1rem; color: #333; cursor: pointer; line-height: 1.4; word-break: break-all;}

/* 左侧路线预览的方形区域 */
.route-preview-box {
    width: 25px;
    height: 25px;
    flex-shrink: 0;    /* 防止被右侧按钮挤压变形 */
    box-sizing: border-box;
    margin-right: 4px;
}

/* SVG 本身铺满预览框 */
.route-preview-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* AMap Fixes */
.amap-copyright { box-sizing: content-box; }

/* ==========================================================================
   Unified Modal Styles (统一弹窗风格)
   ========================================================================== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    width: 22rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.modal-content-wide {
    width: 39rem; /* 详情弹窗需要稍微宽一点以容纳距离文本，增加50% */
}
.modal-title {
    margin-top: 0;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    font-size: 1.3rem; /* 统一标题大字号 */
}
.modal-body {
    margin-top: 1rem;
}
.list-body {
    max-height: 18rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}
.modal-label {
    font-size: 0.85rem;
    color: #666;
}
.modal-select {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.modal-actions {
    margin-top: 1.5rem;
    text-align: right;
}
.modal-actions .btn {
    margin-left: 0.5rem;
    display: inline-block;
    width: auto;
    font-size: 1.1rem;    /* 统一按钮大字号 */
    padding: 0.4rem 1rem; /* 统一按钮边距 */
}
.cancel-btn {
    background: #ccc;
    color: #333;
    border-color: #ccc;
}
.cancel-btn:hover {
    background: #bbb;
    border-color: #bbb;
}

/* ==========================================================================
   Route Search Result Buttons (智能对齐与无缝循环滚动)
   ========================================================================== */
.route-btn {
    width: 100%;
    margin-bottom: 0.25rem; /* 恢复紧凑的上下间距 */
    padding: 0.25rem 0.5rem; /* 恢复原版较扁的高度 */
    line-height: 1.5;
    overflow: hidden;
}

.route-btn-inner {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.scroll-wrapper {
    display: flex;
    white-space: nowrap;
    /* 文字短时：占满宽度并居中 */
    width: 100%;
    justify-content: center;
}

/* 溢出时由 JS 加上此 Class */
.scrolling-wrapper {
    /* 文字长时：解除宽度限制，靠左对齐，并执行匀速滚动 */
    width: auto;
    justify-content: flex-start;
    animation: marquee-scroll var(--scroll-duration, 5s) linear infinite;
}

.route-btn-text {
    display: inline-block;
    white-space: nowrap;
}

.scrolling-wrapper .route-btn-text {
    /* 核心：在原文字和克隆文字之间加上你想要的 “___” 空白间距 */
    padding-right: 3rem; 
}

@keyframes marquee-scroll {
    /* 核心算法：移动整个容器的 50%（也就是刚好一段文字+一段空白的长度），瞬间复位，实现无缝错觉 */
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================================================
   Sortable Drag & Drop Styles
   ========================================================================== */
.sortable-ghost {
    opacity: 0.4;
    background: #f0f8ff;
}

.sortable-chosen {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sortable-drag {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 10000;
}

.route-item {
    position: relative;
}

.route-item:hover {
    border-color: #25A5F7 !important;
}

@keyframes marquee-scroll {
    /* 核心算法：移动整个容器的 50%（也就是刚好一段文字+一段空白的长度），瞬间复位，实现无缝错觉 */
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================================
   线路可见性切换按钮 (SVG 图标样式)
   ========================================= */

/* 图标基础属性 */
.icon-svg {
width: 20px;
height: 20px;
vertical-align: middle;
transition: all 0.2s ease-in-out; /* 添加平滑的颜色过渡 */
}

/* 默认状态（路线可见）：显示睁眼，隐藏闭眼 */
.visibility-toggle .icon-eye {
display: block;
color: #555; /* 你可以改成你主题的颜色，比如 #3b82f6 */
}
.visibility-toggle .icon-eye-off {
display: none;
}

/* 隐藏状态（路线不可见）：隐藏睁眼，显示闭眼 */
.visibility-toggle.is-hidden .icon-eye {
display: none;
}
.visibility-toggle.is-hidden .icon-eye-off {
display: block;
color: #adb5bd; /* 隐藏时的灰色，表示不可用 */
}

/* 悬停效果 (可选，提升用户体验) */
.visibility-toggle:hover .icon-eye {
color: #000; 
}
.visibility-toggle.is-hidden:hover .icon-eye-off {
color: #6c757d;
}