<template>
  <div>
    <div class="navbar">
      <div class="navbar__backdrop"/>
      <div class="navbar__content">
        <div class="navbar__left">
          <div class="navbar__toggle">
            <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
          </div>
          <div class="navbar__brand">
<!--            <div class="navbar__brand-title">{{ $t('login.systemName') }}</div>-->
<!--            <div class="navbar__brand-meta">-->
<!--              <span class="navbar__brand-chip">{{ currentDateLabel }}</span>-->
<!--            </div>-->
          </div>
          <div class="navbar__breadcrumb">
            <breadcrumb />
          </div>
        </div>

        <div class="navbar__right">
          <el-dropdown class="language-container" trigger="click" @command="changeLanguage">
            <div class="nav-action language-button">
              <span class="nav-action__icon el-icon-connection"/>
              <span class="nav-action__text">{{ currentLocaleLabel }}</span>
              <i class="el-icon-arrow-down el-icon--right"/>
            </div>
            <el-dropdown-menu slot="dropdown" class="navbar-dropdown">
              <el-dropdown-item
                v-for="item in localeOptions"
                :key="item.value"
                :command="item.value"
                :disabled="item.value === currentLocale"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown class="avatar-container" trigger="click">
            <div class="avatar-wrapper">
              <div class="avatar-wrapper__meta">
                <span class="avatar-wrapper__label">{{ name }}</span>
              </div>
              <div class="avatar-wrapper__image-box">
                <img :src="require('@/assets/img/leftPic.png')" class="user-avatar">
              </div>
              <i class="el-icon-caret-bottom"/>
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown navbar-dropdown">
              <router-link class="inlineBlock" to="/">
                <el-dropdown-item>
                  {{ $t('common.home') }}
                </el-dropdown-item>
              </router-link>
              <el-dropdown-item divided @click.native="logout">
                <span class="dropdown-action">{{ $t('common.logout') }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!--      <div style="position: absolute;right: 20%;top:8px">-->
      <!--        <el-badge v-if="showError" :value="errorCount" type="danger">-->
      <!--          <el-button size="small" type="warning" @click="showOrder">昨日未生产订单</el-button>-->
      <!--        </el-badge>-->
      <!--      </div>-->
    </div>
    <el-dialog :visible.sync="dialogFormVisible4" title="未生产订单" center class="navbar-dialog" width="400px">
      <div class="navbar-dialog__content">
        存在订单号 {{ errorData[0].订单号 }} 等{{ errorCount }}个逾期订单，请前往生产计划下发模块进行处理！
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible4 = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitAdd4()">处理订单</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import { setLocale, SUPPORT_LOCALES } from '@/lang'
// import { initApproval, initApprovalOffline } from '@/api/PurchasingCenter/FundApproval'
// import { searchUrgentItem } from '@/api/ManufacturingCenter/InitialProduction'
// import { searchTable1 as searchTableInvoice } from '@/api/PurchasingCenter/InvoiceSettlementApprove'
// import { RequestFund, setChakan2 } from '@/api/PurchasingCenter/PurchaseContractRequestFund'
// import { initApproval1, initApprovalOutsourcing, initApprovalMaterials } from '@/api/WorkshopProcurement/FundApproval'
// import { searchTable1 as InvoiceSettlementApprove1 } from '@/api/WorkshopProcurement/InvoiceSettlementApprove1'
// import { searchTable1 as OutsourcingArrivalTicket } from '@/api/Outsourcing/ApprovalOfOutsourcingArrivalTicket'
// import { searchInvoice as searchMaterialsInvoice } from '@/api/WorkshopProcurement/MaterialsInvoiceApproval'
// import { searchTable1 as searchContractApproval } from '@/api/WorkshopProcurement/ProcurementContractApproval'
// import { getPickingList, setPickingList } from '@/api/Inventory/MaterialOut'
/* import { searchTable } from '@/api/PurchasingCenter/PurchaseMaterielModify'
import { search } from '@/api/Assembly/DeliveryConfirmation'
import { searchtable as searchtableSupplement } from '@/api/WorkshopProcurement/ScrappedSupplementaryInvestment1'*/ // 查询报废补投零件
// import Cookies from 'js-cookie'
export default {
  components: {
    Breadcrumb,
    Hamburger
  },
  data() {
    return {
      tableData: [],
      errorCount: 0,
      errorData: [{ 订单号: '' }],
      showError: false,
      dialogFormVisible4: false,
      timer: '',
      noticeFund: null,
      noticeInvoice: null,
      noticeContractKG: null, // 领料单
      selfMadeparts: null, // 自制件
      productionPicking: null, // 物料
      purchaseContract: null, // 采购合同
      purchaseOrder: null, // 采购订单
      productionOperation: null, // 生产投产
      orderOperation: null, // 订单投产
      deliveryNotice: null, // 发货通知
      partsScrapping: null, // 零件报废
      noticeDeliver: null,
      noticeApproval: null,
      noticeInvoiceManufacture: null,
      noticeInvoiceOutsourcing: null,
      noticeInvoiceMaterials: null,
      noticeContractApproval: null,
      PickingListSearch: null, // 领料单
      SelfMadePartsReceiptSearch: null, // 库存管理自制件
      PurchaseContract: null,
      OrderProduction: null,
      PurchaseContractSearch: null,
      DeliveryNotice: null,
      ScrapReplenishment: null,
      OrderConfirmationShipment: null,
      localeOptions: [
        { value: 'zh-CN', label: '中文' },
        { value: 'en-US', label: 'English' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id',
      'token',
      'token'
    ]),
    currentLocale() {
      return this.$i18n.locale
    },
    currentLocaleLabel() {
      const current = this.localeOptions.find(item => item.value === this.currentLocale)
      return current ? current.label : this.$t('common.language')
    },
    currentDateLabel() {
      return new Intl.DateTimeFormat(this.currentLocale, {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      }).format(new Date())
    }
  },
  created() {
    // this.showOrder()
  },
  mounted() {
    /* if (this.id === 3 || Cookies.get('id') === 3) { // id=3 沈大为 总经理
      this.checkApproval()
      this.timer = setInterval(this.checkApproval, 1000 * 60 * 5)
    } else if (this.token.toString() === '11') { // 11 技术部长
      // 存储过程 库存管理_物料主文件_基本_采购部_查询未审核数量
      this.comfirmMaterial() // 您有采购物料申请待审批，请及时处理，点击查看
      this.timer = setInterval(this.comfirmMaterial, 1000 * 60 * 5)
      // 存储过程 采购管理_采购物料修改确认_查询数据
      this.comfirmMaterial_Update() // 您有采购物料更改申请待审批，请及时处理，点击查看
      this.timer = setInterval(this.comfirmMaterial_Update, 1000 * 60 * 5)
    } else if (this.token.toString() === '2' || this.token.toString() === '3') { // 2 采购部长 3 采购员 18 财务(会计)
      this.comfirmMaterial_CG()
      this.timer = setInterval(this.comfirmMaterial_CG, 1000 * 60 * 5)
    } else if (this.token.toString() === '5') { // 5 计划员
      this.comfirmUrgentItem()
      this.timer = setInterval(this.comfirmUrgentItem, 1000 * 60 * 5)
      this.searchtableSupplement() // 报废补投(制造)
      this.timer = setInterval(this.searchtableSupplement, 1000 * 60 * 5)
    } else if (this.token.toString() === '21') { // 21 装配部长
      this.comfirmDeliver()
      this.timer = setInterval(this.comfirmDeliver, 1000 * 60 * 5)
    } else if (this.token.toString() === '26') { // 26 制造部总经理
      this.ManufacturingApprova()
      this.timer = setInterval(this.ManufacturingApprova, 1000 * 60 * 5)
    } else if (this.token.toString() === '18') { // 26 财务
      this.FinanceApprova()
      this.timer = setInterval(this.FinanceApprova, 1000 * 60 * 5)
    }*/
    if (this.token.toString() === '7') { // 仓库
      this.warehouseSearch()
      this.timer = setInterval(this.warehouseSearch, 1000 * 60 * 5)
    } else if (this.token.toString() === '11') { // 审核
      this.newPurchaseContract()
      this.timer = setInterval(this.newPurchaseContract, 1000 * 60 * 5)
    } else if (this.token.toString() === '8') { // 发货
      this.newDeliveryNotice()
      this.timer = setInterval(this.newDeliveryNotice, 1000 * 60 * 5)
    } else if (this.token.toString() === '16') { // 16 精工车间
      this.newScrapReplenishment()
      this.timer = setInterval(this.newScrapReplenishment, 1000 * 60 * 5)
    } else if (this.token.toString() === '4') { // 4 采购
      this.purchaseSearch()
      this.timer = setInterval(this.purchaseSearch, 1000 * 60 * 5)
    } else if (this.token.toString() === '3' || this.token.toString() === '11') { // 4 销售
      this.saleSearch()
      this.timer = setInterval(this.saleSearch, 1000 * 60 * 5)
    } else if (this.token.toString() === '15') { // 15 技术
      this.newOrderInformation()
      this.timer = setInterval(this.newOrderInformation, 1000 * 60 * 5)
    } else if (this.token.toString() === '2') { // 2 管理员
      this.newOrderProduction()
      this.timer = setInterval(this.newOrderProduction, 1000 * 60 * 5)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    warehouseSearch() {
      this.newPickingListSearch()
      this.newSelfMadePartsReceiptSearch()
    },
    purchaseSearch() {
      this.newPurchaseContractSearch()
      this.newPaymentOrder()
    },
    saleSearch() {
      this.newOrderConfirmationShipment()
    },
    newPickingListSearch() {
      // 新领料单通知查询
      var param = []
      var Data = this.CreateData('11', '装配管理_领料单明细_查询_新通知', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.PickingListSearch = null
          this.PickingListSearch = this.$notify.success({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: ' <div>您有新的领料单需要备料确认，请及时处理，<a style="color: #1e6abc">点击查看</a></div>',
            onClick: () => {
              this.$router.push({ path: '/WarehouseManagement/MaterialRequisition' })
              setTimeout(this.PickingListSearch.close(), 1000)
              var param = []
              var Data = this.CreateData('12', '装配管理_领料单明细_确认查看', param)
              this.ExecDatabase(Data)
            },
            duration: 1000 * 60
          })
        }
      })
    },
    newSelfMadePartsReceiptSearch() {
      // 新自制件入库查询
      var param = []
      var Data = this.CreateData('11', '库存管理_自制件_查询_新通知', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.SelfMadePartsReceiptSearch = null
          this.SelfMadePartsReceiptSearch = this.$notify.success({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: ' <div>您有新的自制件入库，需要您确认<a style="color: #1e6abc">点击进入确认界面</a></div>',
            onClick: () => {
              this.$router.push({ path: '/WarehouseManagement/PurchasePartsStorage' })
              setTimeout(this.SelfMadePartsReceiptSearch.close(), 1000)
              var param = []
              var Data = this.CreateData('12', '库存管理_自制件_确认查看', param)
              this.ExecDatabase(Data)
            },
            duration: 1000 * 60
          })
        }
      })
    },
    newPurchaseContract() {
    //  新采购合同查询
      var param = []
      var Data = this.CreateData('11', '采购管理_采购合同_查询_新通知', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.PurchaseContract = null
          this.PurchaseContract = this.$notify.success({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: ' <div>您有新的采购合同，需要您审批<a style="color: #1e6abc">点击进入确认界面</a></div>',
            onClick: () => {
              this.$router.push({ path: '/SeikoWorkshop/ProcurementContractAudit' })
              setTimeout(this.PurchaseContract.close(), 1000)
              var param = []
              var Data = this.CreateData('12', '采购管理_采购合同_确认查看', param)
              this.ExecDatabase(Data)
            },
            duration: 1000 * 60
          })
        }
      })
    },
    newPurchaseContractSearch() {
      // 采购合同审核通过是否通知
      var param = []
      var Data = this.CreateData('11', '采购管理_采购合同_审核通过是否通知_查询新通知', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.PurchaseContractSearch = null
          this.PurchaseContractSearch = this.$notify.success({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: ' <div>您有新的合同审核通过<a style="color: #1e6abc">点击查看详情</a></div>',
            onClick: () => {
              this.$router.push({ path: '/PurchasingManagement/OrderInquiry' })
              setTimeout(this.PurchaseContractSearch.close(), 1000)
              var param = []
              var Data = this.CreateData('12', '采购管理_采购合同_审核通过是否通知_确认查看', param)
              this.ExecDatabase(Data)
            },
            duration: 1000 * 60
          })
        }
      })
    },
    newOrderInformation() {
      // 新订单查询技术审核确认
      var param = []
      var Data = this.CreateData('11', '合同管理_订单信息_基础表_查询_新通知', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.OrderInformation = null
          this.OrderInformation = this.$notify.success({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: ' <div>您有新的订单，需要您技术审核确认<a style="color: #1e6abc">点击进入技术确认界面</a></div>',
            onClick: () => {
              this.$router.push({ path: '/TechnologyCenter/DrawingConfirmation' })
              setTimeout(this.OrderInformation.close(), 1000)
              var param = []
              var Data = this.CreateData('12', '合同管理_订单信息_基础表_确认查看', param)
              this.ExecDatabase(Data)
            },
            duration: 1000 * 60
          })
        }
      })
    },
    newOrderProduction() {
      // 新订单查询订单投产
      var param = []
      var Data = this.CreateData('11', '合同管理_订单信息_基础表_查询_新通知', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.OrderProduction = null
          this.OrderProduction = this.$notify.success({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: ' <div>您有新的订单，需要投产<a style="color: #1e6abc">点击进入订单投产</a></div>',
            onClick: () => {
              this.$router.push({ path: '/SalesManagement/OrderRelease' })
              setTimeout(this.OrderProduction.close(), 1000)
              var param = []
              var Data = this.CreateData('12', '合同管理_订单信息_基础表_确认查看', param)
              this.ExecDatabase(Data)
            },
            duration: 1000 * 60
          })
        }
      })
    },
    newPaymentOrder() {
      // 付款是否通知
      var param = []
      var Data = this.CreateData('11', '采购管理_采购合同_付款是否通知_新通知', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.PaymentOrder = null
          this.PaymentOrder = this.$notify.success({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: ' <div>您有合同付款通知<a style="color: #1e6abc">点击查看详情</a></div>',
            onClick: () => {
              this.$router.push({ path: '/PurchasingManagement/OrderInquiry' })
              setTimeout(this.PaymentOrder.close(), 1000)
              var param = []
              var Data = this.CreateData('12', '采购管理_采购合同_付款通知_确认查看', param)
              this.ExecDatabase(Data)
            },
            duration: 1000 * 60
          })
        }
      })
    },
    newDeliveryNotice() {
    //  新发货通知是否查看
      var param = []
      var Data = this.CreateData('11', '合同管理_订单信息_基础表_通知发货是否查看_查询新通知', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.DeliveryNotice = null
          this.DeliveryNotice = this.$notify.success({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: ' <div>您有新的发货通知，注意查看<a style="color: #1e6abc">点击查看详情</a></div>',
            onClick: () => {
              this.$router.push({ path: '/SalesManagement/ProductDelivery' })
              setTimeout(this.DeliveryNotice.close(), 1000)
              var param = []
              var Data = this.CreateData('12', '合同管理_订单信息_基础表_通知发货是否查看_确认查看', param)
              this.ExecDatabase(Data)
            },
            duration: 1000 * 60
          })
        }
      })
    },
    newScrapReplenishment() {
      // 精工车间 报废补投新的查询
      var param = []
      var Data = this.CreateData('11', '车间生产管理工艺_零件工艺计划_报废零件记录_是否查看查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.ScrapReplenishment = null
          this.ScrapReplenishment = this.$notify.success({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: ' <div>有零件报废，请及时补投<a style="color: #1e6abc">点击进入“报废补投”界面</a></div>',
            onClick: () => {
              this.$router.push({ path: '/SeikoWorkshop/ScrapProduction' })
              setTimeout(this.ScrapReplenishment.close(), 1000)
              var param = []
              var Data = this.CreateData('12', '车间生产管理工艺_零件工艺计划_报废零件记录_确认查看', param)
              this.ExecDatabase(Data)
            },
            duration: 1000 * 60
          })
        }
      })
    },
    newOrderConfirmationShipment() {
      //  订单确认发货
      var param = []
      var Data = this.CreateData('11', '合同管理_订单信息_基础表_已发货是否查看查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.OrderConfirmationShipment = null
          this.OrderConfirmationShipment = this.$notify.success({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: ' <div>有合同已发货<a style="color: #1e6abc">点击查看发货信息</a></div>',
            onClick: () => {
              this.$router.push({ path: '/SalesManagement/DeliveryRecord' })
              setTimeout(this.OrderConfirmationShipment.close(), 1000)
              var param = []
              var Data = this.CreateData('12', '合同管理_订单信息_基础表_已发货_确认查看', param)
              this.ExecDatabase(Data)
            },
            duration: 1000 * 60
          })
        }
      })
    },
    showOrder() {
      // 未完成订单查询
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_发动机订单计划_未完成计划_查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response.data)
        if (response.data.length > 0) {
          this.errorCount = response.data.length
          this.errorData = response.data
          this.showError = true
          this.dialogFormVisible4 = true
        } else {
          this.showError = false
        }
      })
    },
    submitAdd4() {
      this.$router.push({
        // param参数用name query 参数用 path
        path: '/WorkOrderManagement/ReleaseOfProductionPlan' })
      this.dialogFormVisible4 = false
    },
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
    changeLanguage(locale) {
      if (SUPPORT_LOCALES.indexOf(locale) === -1 || locale === this.currentLocale) return
      setLocale(locale)
      this.$message.success(this.$t('common.language') + ': ' + this.currentLocaleLabel)
    },
    logout() {
      this.$store.dispatch('FedLogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .navbar {
    position: relative;
    padding: 5px 18px 5px;
    overflow: hidden;
    background: linear-gradient(135deg, #0d66cf 0%, #2084f3 54%, #54abff 100%);
    box-shadow: 0 18px 36px rgba(18, 86, 171, 0.2);
  }

  .navbar__backdrop {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at left top, rgba(255, 255, 255, 0.18), transparent 28%),
      radial-gradient(circle at right bottom, rgba(255, 255, 255, 0.12), transparent 24%);
    pointer-events: none;
  }

  .navbar__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 56px;
  }

  .navbar__left,
  .navbar__right {
    display: flex;
    align-items: center;
  }

  .navbar__left {
    flex: 1;
    min-width: 0;
  }

  .navbar__right {
    gap: 12px;
    flex-shrink: 0;
  }

  .navbar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    transition: background-color .2s ease, transform .2s ease;
  }

  .navbar__toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
  }

  .hamburger-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .navbar__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    max-width: 360px;
  }

  .navbar__brand-title {
    overflow: hidden;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar__brand-meta {
    margin-top: 6px;
  }

  .navbar__brand-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .navbar__breadcrumb {
    flex: 1;
    min-width: 0;
    margin-left: 8px;
    padding: 0 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
  }

  .language-container,
  .avatar-container {
    display: flex;
    align-items: center;
  }

  .nav-action,
  .avatar-wrapper {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    color: #ffffff;
    transition: background-color .2s ease, transform .2s ease;
    cursor: pointer;
  }

  .nav-action:hover,
  .avatar-wrapper:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
  }

  .language-button {
    padding: 0 14px;
    font-size: 13px;
  }

  .nav-action__icon {
    font-size: 16px;
  }

  .nav-action__text {
    margin-left: 8px;
  }

  .avatar-wrapper {
    padding: 0 12px 0 14px;
    gap: 10px;
  }

  .avatar-wrapper__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
  }

  .avatar-wrapper__label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
  }

  .avatar-wrapper__sub {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .avatar-wrapper__image-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
  }

  .user-avatar {
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  .el-icon-caret-bottom {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
  }

  .dropdown-action {
    display: block;
  }

  .navbar-dialog__content {
    font-size: 22px;
    line-height: 1.6;
    color: #f56c6c;
  }

  ::v-deep .app-breadcrumb.el-breadcrumb {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-left: 0;
    line-height: 1.4;
  }

  ::v-deep .app-breadcrumb .el-breadcrumb__item {
    display: inline-flex;
    align-items: center;
  }

  ::v-deep .app-breadcrumb .el-breadcrumb__inner,
  ::v-deep .app-breadcrumb .el-breadcrumb__inner a,
  ::v-deep .app-breadcrumb .no-redirect,
  ::v-deep .app-breadcrumb .el-breadcrumb__separator {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  ::v-deep .app-breadcrumb .el-breadcrumb__inner {
    font-size: 13px;
    font-weight: 500;
  }

  ::v-deep .navbar-dropdown.el-dropdown-menu {
    border-radius: 16px;
    border: none;
    box-shadow: 0 16px 34px rgba(22, 56, 102, 0.16);
    padding: 8px;
  }

  ::v-deep .navbar-dropdown .el-dropdown-menu__item {
    border-radius: 10px;
    line-height: 38px;
    font-size: 13px;
    color: #214269;
  }

  ::v-deep .navbar-dropdown .el-dropdown-menu__item:not(.is-disabled):hover {
    background: #edf5ff;
    color: #1576e8;
  }

  ::v-deep .el-notification.right {
    cursor: pointer !important;
  }

  @media (max-width: 1200px) {
    .navbar__brand {
      display: none;
    }
  }

  @media (max-width: 900px) {
    .navbar {
      padding: 10px 12px;
    }

    .navbar__breadcrumb {
      display: none;
    }

    .avatar-wrapper__meta {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .language-button {
      min-width: 48px;
      padding: 0 12px;
    }

    .nav-action__text {
      display: none;
    }

    .navbar__right {
      gap: 8px;
    }
  }
</style>
