/* =====================================================
   水位管理系统 - 现代主题覆盖
   覆盖 Element UI 2.x + AdminLTE + Bootstrap 默认样式
   ===================================================== */

/* ---- 全局变量 & 基础 -------------------------------- */
:root {
  --primary:       #1677ff;
  --primary-light: #e8f4ff;
  --primary-dark:  #0958d9;
  --nav-bg:        #001529;
  --nav-active:    #1677ff;
  --page-bg:       #f0f2f5;
  --card-bg:       #ffffff;
  --border:        #e8eaed;
  --text-main:     #1f2328;
  --text-sub:      #636c76;
  --radius:        8px;
  --radius-sm:     6px;
  --shadow-card:   0 1px 6px rgba(0,21,41,.08), 0 1px 2px rgba(0,21,41,.04);
  --shadow-hover:  0 4px 12px rgba(0,21,41,.12);
}

html, body {
  background: var(--page-bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  color: var(--text-main);
}

/* ---- 顶部 Header ----------------------------------- */
/* #rrapp 和 .main-header 统一用同一背景，消除色差 */
#rrapp,
.wrapper#rrapp {
  min-height: 72px !important;
  background: linear-gradient(to right, #1a3a5c, #2176b5) !important;
}

.main-header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 72px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* logo 固定在左上角，不随 header 高度拉伸 */
.main-header .logo {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: auto !important;
  background: transparent !important;
  border-right: none !important;
  z-index: 1 !important;
}

/* #title 全宽，文字上下左右居中 */
#title {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  left: auto !important;
}

.main-header .navbar {
  background: transparent !important;
}

@media screen and (max-width: 768px) {
  #rrapp, .wrapper#rrapp {
    min-height: 88px !important;
  }
  .main-header {
    height: 88px !important;
    min-height: 88px !important;
  }
  #headTittle {
    font-size: 22px !important;
    letter-spacing: 2px !important;
  }
  .el-menu.el-menu--horizontal {
    height: 48px !important;
  }
  .el-menu--horizontal > .el-menu-item,
  .el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 48px !important;
    line-height: 48px !important;
    font-size: 13px !important;
  }
}

/* 顶部系统标题 */
#headTittle, #title h1, #title {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 6px;
  background: linear-gradient(90deg, #ffffff 0%, #a0cfff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 36px !important;
  font-weight: 700 !important;
}

/* ---- 导航菜单 (el-menu horizontal) ----------------- */
.el-menu.el-menu--horizontal {
  background-color: #1a3a5c !important;
  border-bottom: 2px solid rgba(255,255,255,.2) !important;
  height: 50px !important;
}

.el-menu--horizontal > .el-menu-item {
  color: rgba(255,255,255,.75) !important;
  font-size: 15px !important;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
  height: 50px !important;
  line-height: 50px !important;
  border-bottom: 2px solid transparent !important;
  transition: all .2s ease !important;
}

.el-menu--horizontal > .el-menu-item:hover,
.el-menu--horizontal > .el-menu-item.is-active {
  background-color: rgba(22,119,255,.15) !important;
  color: #ffffff !important;
  border-bottom: 2px solid var(--primary) !important;
}

.el-menu--horizontal > .el-submenu .el-submenu__title {
  color: rgba(255,255,255,.75) !important;
  font-size: 15px !important;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
  height: 50px !important;
  line-height: 50px !important;
  border-bottom: 2px solid transparent !important;
}

.el-menu--horizontal > .el-submenu .el-submenu__title:hover,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  background-color: rgba(22,119,255,.15) !important;
  color: #ffffff !important;
  border-bottom: 2px solid var(--primary) !important;
}

/* 下拉子菜单面板 */
.el-menu--popup {
  background: #1a3a5c !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  min-width: 140px !important;
}

.el-menu--popup .el-menu-item {
  color: rgba(255,255,255,.7) !important;
  font-size: 14px !important;
  height: 40px !important;
  line-height: 40px !important;
}

.el-menu--popup .el-menu-item:hover {
  background-color: rgba(22,119,255,.2) !important;
  color: #ffffff !important;
}

/* 竖向侧边菜单 (main.html) */
.el-menu-vertical-demo {
  background: #001529 !important;
  border-right: none !important;
}

.el-menu-vertical-demo .el-menu-item,
.el-menu-vertical-demo .el-submenu__title {
  color: rgba(255,255,255,.65) !important;
  font-size: 16px !important;
}

.el-menu-vertical-demo .el-menu-item.is-active,
.el-menu-vertical-demo .el-menu-item:hover {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* ---- 按钮 ----------------------------------------- */
.el-button {
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all .2s ease !important;
  border: 1px solid var(--border) !important;
}

.el-button--primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(22,119,255,.35) !important;
}

.el-button--primary:hover, .el-button--primary:focus {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: 0 4px 10px rgba(22,119,255,.45) !important;
}

.el-button--danger {
  background: #ff4d4f !important;
  border-color: #ff4d4f !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(255,77,79,.3) !important;
}

.el-button--danger:hover {
  background: #d9363e !important;
  border-color: #d9363e !important;
}

.el-button--success {
  background: #52c41a !important;
  border-color: #52c41a !important;
  color: #fff !important;
}

.el-button--warning {
  background: #fa8c16 !important;
  border-color: #fa8c16 !important;
  color: #fff !important;
}

.el-button + .el-button {
  margin-left: 8px !important;
}

/* ---- 输入框 ---------------------------------------- */
.el-input__inner {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  font-size: 14px !important;
  transition: all .2s ease !important;
}

.el-input__inner:hover {
  border-color: var(--primary) !important;
}

.el-input__inner:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(22,119,255,.12) !important;
  outline: none !important;
}

/* ---- 内容区域 (#apps) ----------------------------- */
#apps {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;        /* 手机端 */
}

/*
@media screen and (min-width: 768px) {
    #apps { padding: 0 60px !important; }
}
*/

@media screen and (min-width: 1200px) {
    #apps { padding: 0 60px !important; }
}

/* ---- 表格 ----------------------------------------- */
.el-table {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 不干预 Element UI 的 table-layout 和 col 宽度计算，
   让其 JS 正常同步表头与表体列宽，保证对齐。
   对于无固定 width 的列，Element UI 会自动等分容器宽度（即页宽-padding）。 */

/* 每列最小宽度：th/td 上设置才生效，col 元素上无效 */
.el-table th,
.el-table td {
  min-width: 50px !important;
}

/* 单元格内容超出省略，不撑宽列 */
.el-table .cell {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* 列多超出容器时，表格内部横向滚动（header 跟随由 Element UI JS 同步） */
.el-table__body-wrapper {
  overflow-x: auto !important;
}

.el-table__header-wrapper {
  overflow-x: hidden !important;
}

.el-table th {
  background: #fafafa !important;
  color: var(--text-sub) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 12px 0 !important;
}

.el-table td {
  border-bottom: 1px solid #f5f5f5 !important;
  color: var(--text-main) !important;
  padding: 12px 0 !important;
}

.el-table--border th, .el-table--border td {
  border-right: 1px solid #f0f0f0 !important;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fafcff !important;
}

.el-table__body tr:hover > td {
  background: var(--primary-light) !important;
}

.el-table__header-wrapper {
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

/* ---- 表单 ----------------------------------------- */
.el-form-item__label {
  color: var(--text-sub) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.el-form-item {
  margin-bottom: 20px !important;
}

/* ---- 对话框 --------------------------------------- */
.el-dialog {
  border-radius: var(--radius) !important;
  box-shadow: 0 12px 40px rgba(0,21,41,.18) !important;
  overflow: hidden !important;
}

.el-dialog__header {
  background: #fafafa !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 24px !important;
}

.el-dialog__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

.el-dialog__body {
  padding: 24px !important;
  color: var(--text-main) !important;
}

.el-dialog__footer {
  border-top: 1px solid var(--border) !important;
  padding: 14px 24px !important;
  background: #fafafa !important;
}

/* ---- 下拉选择 ------------------------------------- */
.el-select .el-input__inner {
  border-radius: var(--radius-sm) !important;
}

.el-select-dropdown {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-hover) !important;
  overflow: hidden !important;
}

.el-select-dropdown__item.selected {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

.el-select-dropdown__item:hover {
  background: var(--primary-light) !important;
}

/* ---- 分页 ----------------------------------------- */
.el-pagination {
  padding: 16px 0 !important;
}

.el-pagination button,
.el-pagination .el-pager li {
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  border: 1px solid var(--border) !important;
  margin: 0 2px !important;
}

.el-pagination .el-pager li.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.el-pagination .el-pager li:hover {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* ---- 日期选择 ------------------------------------- */
.el-date-editor .el-input__inner {
  border-radius: var(--radius-sm) !important;
}

.el-picker-panel {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-hover) !important;
  border: 1px solid var(--border) !important;
}

/* ---- 下拉菜单 (el-dropdown) ----------------------- */
.el-dropdown-menu {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-hover) !important;
  padding: 4px 0 !important;
}

.el-dropdown-menu__item {
  font-size: 14px !important;
  color: var(--text-main) !important;
  padding: 8px 16px !important;
  line-height: 1.6 !important;
}

.el-dropdown-menu__item:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* ---- Tooltip -------------------------------------- */
.el-tooltip__popper {
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
}

.el-tooltip__popper.is-dark {
  background: rgba(0,21,41,.85) !important;
  backdrop-filter: blur(4px) !important;
}

/* ---- Checkbox / Radio ----------------------------- */
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.el-checkbox__inner {
  border-radius: 3px !important;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
}

/* ---- Bootstrap Panel (卡片容器) -------------------- */
.panel {
  border-radius: var(--radius) !important;
  border: none !important;
  box-shadow: var(--shadow-card) !important;
  background: var(--card-bg) !important;
  overflow: hidden !important;
}

.panel-default > .panel-heading {
  background: #fafafa !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

/* ---- AdminLTE wrapper ----------------------------- */
.wrapper {
  background: var(--nav-bg) !important;
}

/* ---- 滚动条美化 ------------------------------------ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.35);
}

/* ---- 标签页 (el-tabs) ----------------------------- */
.el-tabs__item.is-active {
  color: var(--primary) !important;
}

.el-tabs__active-bar {
  background-color: var(--primary) !important;
}

.el-tabs__item:hover {
  color: var(--primary) !important;
}

/* ---- el-tree -------------------------------------- */
.el-tree-node__content:hover {
  background: var(--primary-light) !important;
}

.el-tree-node.is-current > .el-tree-node__content {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* ---- headTop flex 列布局：rrapp 填满上方，app 沉底与 #a 对齐 ---- */
#headTop {
    background: #1a3a5c !important;
    display: flex !important;
    flex-direction: column !important;
}

#rrapp {
    height: 0 !important;
    flex: 1 1 0 !important;
    min-height: 72px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ---- #app 与 #a 同行 ----------------------------- */
#app {
    flex: 0 0 auto !important;
    height: auto !important;
    padding-right: 160px !important;
    box-sizing: border-box !important;
    background: #1a3a5c !important;
}


/* #a 高度固定50px匹配菜单栏，top:50%对齐菜单行 */
#a {
    position: absolute !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 160px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    background: #1a3a5c !important;
    z-index: 999 !important;
}

/* ---- 通知/消息 ------------------------------------ */
.el-message {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-hover) !important;
}

.el-message-box {
  border-radius: var(--radius) !important;
  box-shadow: 0 12px 40px rgba(0,21,41,.18) !important;
}

#search {
  margin-left: 10px !important;
}

/* ---- tableDay / tableDayLS 布局修复 ---------------- */

/* #titt：正常流，清除各媒体查询里的负top；flex列排列 h3 + #dayTittle */
#titt {
  position: relative !important;
  top: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 0 4px !important;
}

/* #dayTittle：清除负top/偏移left，保持 flex 行排列 */
#dayTittle {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  flex-wrap: wrap !important;
  gap: 4px 16px !important;
}

/* #c 控件栏：从 absolute 改为 relative，跟在 #titt 后面不重叠 */
#c {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  padding: 6px 0 !important;
  z-index: 999 !important;
}

/* #graph 改为 flex 行布局，宽度限于 #apps 内 */
#graph {
  position: relative !important;
  top: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 600px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  gap: 16px !important;
}

/* 左侧图表：较宽，overflow:hidden 防止 #dayChart left:5% 溢出 */
#dayGraph {
  position: relative !important;
  left: auto !important;
  flex: 0 0 65% !important;
  width: 65% !important;
  max-width: 65% !important;
  height: calc(80vh) !important;
  min-height: 600px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 右侧表格/补偿区：较窄 */
#dayGraphBu {
  position: relative !important;
  left: auto !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: calc(80vh) !important;
  min-height: 600px !important;
  box-sizing: border-box !important;
}

/* #export 按钮：从负top绝对定位改为正常流，避免被父容器裁剪 */
#export {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  float: right !important;
  margin-bottom: 8px !important;
  z-index: 99999 !important;
}

/* 手机端：上下堆叠（900px以下） */
@media screen and (max-width: 900px) {
  #graph {
    flex-direction: column !important;
    min-height: auto !important;
    gap: 12px !important;
  }
  #dayGraph,
  #dayGraphBu {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 450px !important;
    min-height: 450px !important;
  }
}