/* platform.css — 交通局级可视化平台样式 */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#f5f6f8}
a{text-decoration:none;color:inherit}

/* ── 顶栏 ── */
.topnav{height:56px;display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:0 16px;z-index:2000;position:relative;min-width:0}
.logo{font-size:15px;font-weight:800;color:#1a1a2e;white-space:nowrap;display:flex;align-items:center;gap:6px;flex-shrink:0}
.logo .dot{width:8px;height:8px;border-radius:50%;background:#1a73e8;display:inline-block}
.tabs{display:flex;height:100%;gap:0;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:0 12px;height:100%;display:flex;align-items:center;font-size:13px;font-weight:600;color:#374151;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;flex-shrink:0;transition:color .15s}
.tab:hover{color:#1a73e8}
.tab.active{color:#1a73e8;border-bottom-color:#1a73e8}
.nav-search{width:200px;flex-shrink:1;min-width:120px;padding:7px 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;outline:none;display:none}
.nav-search.show{display:block}
.nav-badge{font-size:12px;color:#666;background:#f5f6f8;border-radius:12px;padding:4px 10px;white-space:nowrap;flex-shrink:0}

/* ── 主体 ── */
.main{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}
.shell{display:flex;flex-direction:column;height:100vh}

/* ── 三栏式布局（企业级） ── */
.content-row{flex:1;display:flex;overflow:hidden;position:relative}
#map{flex:1;position:relative;z-index:1}

/* ── 模块视图（仪表盘） ── */
.module-view{position:absolute;inset:0;overflow:auto;padding:24px;display:none;z-index:2;background:#f5f6f8}
.module-view.active{display:block}
.module-head{font-size:18px;font-weight:700;color:#1a1a2e;margin-bottom:16px}

/* 统计卡片 */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat-card{background:#fff;border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.stat-card .num{font-size:26px;font-weight:800;color:#1a73e8}
.stat-card .lbl{font-size:12px;color:#888;margin-top:4px}

/* 面板卡片 */
.panel-card{background:#fff;border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:16px;overflow-x:auto}
.panel-card .pc-title{font-size:14px;font-weight:700;color:#1a1a2e;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;white-space:nowrap}
#editTable{overflow-x:auto}

/* 表格 */
.table-wrap{overflow-x:auto;width:100%}
.data-table{width:100%;border-collapse:collapse;font-size:13px;min-width:max-content}
.data-table th{background:#f8f9fb;text-align:left;padding:8px 10px;color:#666;font-weight:600;position:sticky;top:0;white-space:nowrap}
.data-table td{padding:8px 10px;border-bottom:1px solid #f0f0f0;color:#333}
.data-table tr:hover td{background:#f8faff}

/* 条形图 */
.fuel-bar{display:flex;height:20px;border-radius:6px;overflow:hidden;margin-bottom:8px}
.fuel-bar span{height:100%}
.fuel-legend{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:#666}
.fuel-legend .fg{display:flex;align-items:center;gap:4px}
.fuel-legend .fd{width:10px;height:10px;border-radius:2px;display:inline-block}

/* 图表容器 */
.chart-box{height:280px;position:relative}

/* 空状态 */
.empty-state{text-align:center;padding:60px 20px;color:#999}
.empty-state .big{font-size:40px;margin-bottom:12px}

/* ── 左右侧边栏（结构性三栏，非浮动） ── */
.sidebar{width:300px;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;transition:width .2s}
.sidebar.right{border-right:none;border-left:1px solid #e5e7eb}
.sidebar.collapsed{width:40px}
.sidebar .sb-head{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #f0f0f0;flex-shrink:0}
.sidebar .sb-title{font-size:14px;font-weight:700;color:#1a1a2e}
.sidebar .sb-toggle{cursor:pointer;color:#999;font-size:16px;padding:4px;border:none;background:none;flex-shrink:0}
.sidebar.collapsed .sb-title,.sidebar.collapsed .sb-body{display:none}
.sidebar.collapsed .sb-head{justify-content:center}
.sidebar.collapsed .sb-toggle{transform:rotate(180deg)}
.sidebar .sb-body{flex:1;overflow-y:auto;padding:14px}

/* 侧栏内的分组 */
.sb-group{margin-bottom:16px}
.sb-group-title{font-size:12px;font-weight:700;color:#888;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}

/* 线路勾选项 */
.line-check{display:flex;align-items:center;gap:6px;padding:5px 0;font-size:13px;cursor:pointer;user-select:none}
.line-check input{margin:0}
.line-check:hover{color:#1a73e8}

/* 停站列表 */
.sb-dir-title{font-size:13px;font-weight:700;color:#1a73e8;margin:12px 0 6px;padding-bottom:6px;border-bottom:2px solid #e8f0fe;display:flex;align-items:baseline;gap:6px}
.sb-dir-title .sb-dir-count{font-size:11px;color:#999;font-weight:400}
.stop-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid #f5f5f5;font-size:13px}
.stop-item .s-order{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:#e8f0fe;color:#1a73e8;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.stop-item .s-name{flex:1;line-height:20px;min-width:0;word-break:break-all}
.stop-item .s-transfer{font-size:11px;color:#e65100;margin-top:2px}

/* 换乘标签 */
.transfer-tag{display:inline-block;background:#fff3e0;color:#e65100;padding:1px 6px;border-radius:4px;font-size:11px;margin:1px 2px}

/* 地图样式按钮 */
.style-row{display:flex;flex-wrap:wrap;gap:6px}
.style-btn{padding:5px 12px;border:1px solid #ddd;border-radius:6px;font-size:12px;cursor:pointer;background:#fff;color:#666}
.style-btn.on{background:#1a73e8;color:#fff;border-color:#1a73e8}

/* 开关 */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px}
.switch{position:relative;width:36px;height:20px;cursor:pointer}
.switch input{display:none}
.switch .slider{position:absolute;inset:0;background:#ddd;border-radius:10px;transition:.2s}
.switch .slider:before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:#1a73e8}
.switch input:checked + .slider:before{transform:translateX(16px)}

/* 覆盖统计 */
.cov-item{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px solid #f5f5f5}
.cov-item b{color:#1a73e8}

/* 按钮 */
.btn{display:inline-block;padding:7px 14px;background:#1a73e8;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer}
.btn.ghost{background:#fff;color:#666;border:1px solid #ddd}

/* ── 移动端响应式（≤900px：手机/小平板，侧栏抽屉化） ── */
@media(max-width:900px){
  /* 顶栏精简 */
  .topnav{padding:0 8px;gap:8px}
  .logo{font-size:14px}
  .logo span{display:none}              /* 隐藏 logo 文字，只留圆点 */
  .tab{padding:0 10px;font-size:12px}
  .nav-badge{max-width:100px;overflow:hidden;text-overflow:ellipsis}
  .nav-search{width:120px;min-width:80px}

  /* 侧栏变抽屉：绝对定位盖在地图上，默认收起，点按钮滑出 */
  .sidebar{
    position:absolute;
    top:0;bottom:0;
    width:320px;
    max-width:88vw;
    z-index:3000;
    box-shadow:0 0 24px rgba(0,0,0,.25);
    transition:transform .25s ease;
  }
  .sidebar.left{left:0;transform:translateX(-105%);border-right:1px solid #e5e7eb}
  .sidebar.right{right:0;transform:translateX(105%);border-left:1px solid #e5e7eb}
  .sidebar.open{transform:translateX(0)}
  /* 手机上折叠语义改为「关闭抽屉」，覆盖桌面端 40px 窄条逻辑 */
  .sidebar.collapsed{width:320px;max-width:88vw}
  .sidebar.collapsed .sb-title,.sidebar.collapsed .sb-body{display:block}
  .sidebar.collapsed .sb-head{justify-content:space-between}
  .sidebar.collapsed .sb-toggle{transform:none}
  .sidebar .sb-toggle{font-size:18px;padding:8px 10px}
  .sidebar .sb-body{-webkit-overflow-scrolling:touch}   /* iOS 顺滑滚动 */

  /* 遮罩 */
  .sidebar-mask{position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:2500;display:none}
  .sidebar-mask.show{display:block}

  /* 浮动打开按钮 */
  .mobile-fab{
    position:absolute;z-index:2000;
    width:42px;height:42px;border-radius:50%;
    background:#fff;border:1px solid #e5e7eb;
    box-shadow:0 2px 12px rgba(0,0,0,.22);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;cursor:pointer;color:#1a73e8;
  }
  .mobile-fab.left{left:10px;top:50%;transform:translateY(-50%)}
  .mobile-fab.right{right:10px;top:50%;transform:translateY(-50%)}

  /* 面板卡片/图表在小屏下更紧凑 */
  .panel-card{padding:12px}
  .chart-box{height:220px}
  .stat-cards{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
  .stat-card{padding:12px}
  .stat-card .num{font-size:22px}
}

/* 桌面端隐藏浮动按钮和遮罩 */
.sidebar-mask,.mobile-fab{display:none}
@media(max-width:900px){
  .mobile-fab{display:flex}
  .sidebar-mask{display:none}
  .sidebar-mask.show{display:block}
}

/* ── 竖屏：建议横屏提示 ── */
.rotate-hint{
  display:none;
  position:fixed;left:0;right:0;top:0;
  z-index:4000;
  background:linear-gradient(180deg,#1a73e8,#1557b0);
  color:#fff;font-size:13px;font-weight:600;
  text-align:center;padding:8px 12px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
@media(max-width:767px) and (orientation:portrait){
  .rotate-hint{display:block}
}

/* ── 换乘站图例 ── */
.legend-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px;color:#555}
.legend-dot{border-radius:50%;flex-shrink:0}

/* ── 站点详情卡 ── */
.station-detail .sd-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.station-detail .sd-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.station-detail .sd-name{font-size:15px;font-weight:700;color:#1a1a2e}
.station-detail .sd-count{font-size:13px;color:#666;margin-bottom:8px}
.station-detail .sd-count b{color:#e65100;font-size:16px}
.station-detail .sd-lines{display:flex;flex-wrap:wrap;gap:2px}
.station-detail .sd-lines .transfer-tag.clickable{cursor:pointer}
.station-detail .sd-lines .transfer-tag.clickable:hover{background:#ffe0b2}

/* ── 可点击表格 ── */
.clickable-table tbody tr{cursor:pointer}
.clickable-table tbody tr:hover td{background:#e8f0fe}
.clickable-table tbody tr.sel td{background:#e3f2fd}
.clickable-table tbody tr.sel td:first-child{color:#1a73e8}