/* Stalk dashboard custom styles.
   Element Plus provides all the component styling; this file only adds
   layout glue, the live-marker animation, and the centered login card. */

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, system-ui,
    "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--el-bg-color, #fff);
  color: var(--el-text-color-primary, #303030);
}

#app {
  height: 100%;
}

/* =========================================================================
   Login page
   ========================================================================= */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f2fd 0%, #f5f7fa 100%);
}
html.dark .login-page {
  background: linear-gradient(135deg, #1a2c50 0%, #141414 100%);
}
.login-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 16px;
}
.login-card {
  width: 380px;
  max-width: 92vw;
  border-radius: 16px;
  padding: 8px 16px;
}
.login-header {
  text-align: center;
  margin-bottom: 16px;
}
.login-header h1 {
  margin: 8px 0 4px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.login-subtitle {
  margin: 0 0 16px;
  color: var(--el-text-color-secondary, #909399);
  font-size: 14px;
}
.login-submit {
  width: 100%;
  margin-top: 16px;
}

/* =========================================================================
   Dashboard layout
   ========================================================================= */
.app-root {
  height: 100vh;
}
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
  background: var(--el-bg-color, #fff);
  height: 56px;
  line-height: 56px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-right .el-tag {
  margin-right: 4px;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-body {
  height: calc(100vh - 56px);
}
.app-aside {
  border-right: 1px solid var(--el-border-color-light, #ebeef5);
  background: var(--el-bg-color, #fff);
  overflow-y: auto;
}
.aside-header {
  padding: 16px 20px 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--el-text-color-secondary, #909399);
}
.device-menu {
  border-right: none !important;
}
.device-menu .el-menu-item {
  height: auto;
  line-height: 1.4;
  padding: 12px 16px !important;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.device-menu .el-menu-item.is-disabled {
  opacity: 0.55;
}
.device-meta {
  flex: 1;
  min-width: 0;
}
.device-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--el-text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-sub {
  font-size: 12px;
  color: var(--el-text-color-secondary, #909399);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-main {
  position: relative;
  padding: 0 !important;
  background: var(--el-fill-color-light, #f5f7fa);
  overflow: hidden;
}
.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.map-canvas {
  position: absolute;
  inset: 0;
  background: var(--el-fill-color, #f0f2f5);
}

/* =========================================================================
   Map marker (shared by AMap + Leaflet modes)
   ========================================================================= */
.stalk-marker,
.stalk-marker-leaflet {
  position: relative;
  width: 20px;
  height: 20px;
}
.stalk-marker-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: #409eff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.stalk-marker-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: #409eff;
  border-radius: 50%;
  opacity: 0.6;
  animation: stalk-pulse 2s ease-out infinite;
  z-index: 1;
}
@keyframes stalk-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2.8); opacity: 0;   }
  100% { transform: scale(2.8); opacity: 0;   }
}

/* =========================================================================
   Repair dialog
   ========================================================================= */
.repair-cmd {
  background: var(--el-fill-color-dark, #e6e8eb);
  color: var(--el-text-color-primary);
  padding: 12px 16px;
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  overflow-x: auto;
  margin: 8px 0;
}
.repair-hint {
  color: var(--el-text-color-secondary, #909399);
  font-size: 13px;
  margin: 8px 0 0;
}