<template>
  <el-container class="layout-root">
    <div class="layout-watermark" :style="watermarkStyle" aria-hidden="true"></div>
    <template v-if="useTopMenuLayout">
      <el-container direction="vertical" class="top-layout">
        <el-header class="app-header" height="60px">
          <div class="brand-area">
            <img v-if="tenantLogoDisplay" :src="tenantLogoDisplay" alt="tenant-logo" class="brand-logo" />
            <span v-else class="brand-text">会议核销系统</span>
          </div>

          <nav class="top-nav">
            <router-link
              v-for="menu in menus"
              :key="menu.routePath"
              :to="menu.routePath"
              class="top-nav-item"
              :class="{ 'top-nav-item--active': activePath === menu.routePath }"
            >
              {{ menu.menuName }}
            </router-link>
          </nav>

          <div class="header-actions">
            <GlobalSearchLauncher />

            <el-dropdown
              v-if="authScope === 'TENANT' && canSwitchTenant && switchableTenants.length > 1"
              trigger="click"
              @command="handleTenantSwitchCommand"
            >
              <button class="tenant-switch-btn" :disabled="tenantSwitching">
                <span>{{ tenantDisplay }}</span>
                <span class="tenant-switch-arrow">▼</span>
              </button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in switchableTenants"
                    :key="item.tenantId"
                    :command="item.tenantId"
                    :disabled="tenantSwitching || item.tenantId === selectedTenantSwitchId"
                  >
                    {{ item.tenantName }} ({{ item.tenantCode }}){{ item.current ? " - 当前" : "" }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-dropdown trigger="click" @command="handleUserCommand">
              <div class="user-identity">
                <div class="user-avatar">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                    <circle cx="12" cy="7" r="4" />
                  </svg>
                </div>
                <div class="user-meta">
                  <span class="user-name">{{ userDisplay }}</span>
                  <span class="user-scope">{{ authScope === "TENANT" ? tenantDisplay : "平台管理员" }}</span>
                </div>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="dashboard">工作台</el-dropdown-item>
                  <el-dropdown-item command="profile">个人设置</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出全部设备</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <div class="action-divider"></div>

            <el-badge v-if="canReadInApp" :value="unreadInAppCount" :hidden="unreadInAppCount <= 0" class="notif-badge">
              <button class="icon-btn" title="站内通知" @click="showNotifDialog">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
                  <path d="M13.73 21a2 2 0 0 1-3.46 0" />
                </svg>
              </button>
            </el-badge>

            <button class="icon-btn" title="退出登录" @click="logoutAll">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                <polyline points="16 17 21 12 16 7" />
                <line x1="21" y1="12" x2="9" y2="12" />
              </svg>
            </button>
          </div>
        </el-header>

        <el-main class="main-content">
          <RouterView :key="routeViewKey" />
        </el-main>
      </el-container>
    </template>

    <template v-else>
      <el-aside width="220px" class="layout-aside">
        <div class="sidebar-brand">
          <img v-if="tenantLogoDisplay" :src="tenantLogoDisplay" alt="tenant-logo" class="brand-logo" />
          <span v-else class="brand-text brand-text--light">会议核销系统</span>
        </div>

        <el-menu :default-active="activePath" router class="sidebar-menu">
          <el-menu-item v-for="menu in menus" :key="menu.routePath" :index="menu.routePath">
            {{ menu.menuName }}
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container direction="vertical">
        <el-header class="sub-header" height="60px">
          <div class="sub-header-left">
            <BreadcrumbNav />
          </div>

          <div class="header-actions header-actions--light">
            <GlobalSearchLauncher light />

            <el-dropdown
              v-if="authScope === 'TENANT' && canSwitchTenant && switchableTenants.length > 1"
              trigger="click"
              @command="handleTenantSwitchCommand"
            >
              <button class="tenant-switch-btn tenant-switch-btn--light" :disabled="tenantSwitching">
                <span>{{ tenantDisplay }}</span>
                <span class="tenant-switch-arrow">▼</span>
              </button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in switchableTenants"
                    :key="item.tenantId"
                    :command="item.tenantId"
                    :disabled="tenantSwitching || item.tenantId === selectedTenantSwitchId"
                  >
                    {{ item.tenantName }} ({{ item.tenantCode }}){{ item.current ? " - 当前" : "" }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-dropdown trigger="click" @command="handleUserCommand">
              <div class="user-identity">
                <div class="user-avatar user-avatar--light">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                    <circle cx="12" cy="7" r="4" />
                  </svg>
                </div>
                <div class="user-meta user-meta--light">
                  <span class="user-name">{{ userDisplay }}</span>
                  <span class="user-scope">{{ authScope === "TENANT" ? tenantDisplay : "平台管理员" }}</span>
                </div>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="dashboard">工作台</el-dropdown-item>
                  <el-dropdown-item command="profile">个人设置</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出全部设备</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <div class="action-divider action-divider--light"></div>

            <el-badge v-if="canReadInApp" :value="unreadInAppCount" :hidden="unreadInAppCount <= 0" class="notif-badge">
              <button class="icon-btn icon-btn--light" title="站内通知" @click="showNotifDialog">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
                  <path d="M13.73 21a2 2 0 0 1-3.46 0" />
                </svg>
              </button>
            </el-badge>

            <button class="icon-btn icon-btn--light" title="退出登录" @click="logoutAll">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                <polyline points="16 17 21 12 16 7" />
                <line x1="21" y1="12" x2="9" y2="12" />
              </svg>
            </button>
          </div>
        </el-header>

        <el-main class="main-content">
          <RouterView :key="routeViewKey" />
        </el-main>
      </el-container>
    </template>

    <el-dialog
      v-model="notifDialogVisible"
      title="站内通知中心"
      width="80%"
      :close-on-click-modal="true"
      destroy-on-close
      append-to-body
    >
      <div class="notif-toolbar">
        <div class="notif-tags">
          <el-tag type="info" size="small">总数 {{ notifRows.length }}</el-tag>
          <el-tag type="danger" size="small">未读 {{ notifUnreadCount }}</el-tag>
        </div>
        <div class="notif-actions">
          <el-switch
            v-model="notifOnlyUnread"
            inline-prompt
            active-text="仅看未读"
            inactive-text="全部"
            size="small"
          />
          <el-button
            v-if="canMarkReadInApp"
            type="primary"
            plain
            size="small"
            class="notif-mark-all-read-btn"
            :disabled="notifUnreadCount <= 0"
            @click="handleNotifMarkAllRead"
          >
            全部标记已读
          </el-button>
          <el-button size="small" @click="loadNotifRows">刷新</el-button>
        </div>
      </div>

      <el-table :data="notifDisplayRows" empty-text="暂无站内通知" max-height="420" stripe>
        <el-table-column prop="title" label="标题" min-width="180" />
        <el-table-column prop="content" label="内容" min-width="280" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="90" :formatter="notifStatusFormatter" />
        <el-table-column prop="createdAt" label="创建时间" width="170" />
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button
              v-if="canMarkReadInApp && row.status !== 'READ'"
              type="primary"
              size="small"
              link
              class="notif-mark-read-btn"
              @click="handleNotifMarkRead(row.id)"
            >
              标记已读
            </el-button>
            <span v-else class="notif-read-tag">已读</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-container>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from "vue";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import type { LocationQueryRaw, RouteLocationRaw } from "vue-router";
import { useRoute, useRouter } from "vue-router";
import BreadcrumbNav from "../../components/BreadcrumbNav.vue";
import GlobalSearchLauncher from "../../components/GlobalSearchLauncher.vue";
import { logoutAllAuth, switchTenant } from "../../api/modules";
import { PERMS } from "../../constants/permissions";
import { useAppearanceStore } from "../../stores/appearance";
import { useAuthStore } from "../../stores/auth";
import { useMenuStore } from "../../stores/menu";
import { useNotificationStore } from "../../stores/notification";
import { resolveLoginPath } from "../../utils/authNavigation";
import { toZhStatus } from "../../utils/status";
const route = useRoute();
const router = useRouter();
const appearanceStore = useAppearanceStore();
const authStore = useAuthStore();
const menuStore = useMenuStore();
const notificationStore = useNotificationStore();
const { scope: authScope, tenantId, userName, tenantName, tenantCode, tenantContextVersion } = storeToRefs(authStore);
const { menus, tenantLogoDisplay, switchableTenants, tenantSwitching, useTopMenuLayout } = storeToRefs(menuStore);
const { unreadCount: unreadInAppCount, notifRows } = storeToRefs(notificationStore);
const activePath = computed(() => route.path);
const selectedTenantSwitchId = computed(() => tenantId.value);

const notifDialogVisible = ref(false);
const notifOnlyUnread = ref(false);

let suppressNextAuthRefresh = false;

const tenantSwitchSharedRoutePaths = new Set(["/dashboard", "/profile"]);

const userDisplay = computed(() => userName.value || "未知用户");
const tenantDisplay = computed(() => tenantName.value || tenantCode.value || "未知租户");
const canSwitchTenant = computed(() => authScope.value === "TENANT" && authStore.hasPermission(PERMS.tenant.switch));
const canReadInApp = computed(() => authScope.value === "TENANT" && authStore.hasPermission(PERMS.notification.inAppRead));
const canMarkReadInApp = computed(
  () => authScope.value === "TENANT" && authStore.hasPermission(PERMS.notification.inAppMarkRead),
);

const watermarkDate = new Intl.DateTimeFormat("zh-CN", {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
}).format(new Date());
const watermarkScopeLabel = computed(() => (authScope.value === "TENANT" ? tenantDisplay.value : "PLATFORM"));

const escapeSvgText = (value: string) =>
  String(value || "")
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");

const createWatermarkImage = (lines: string[]) => {
  const [line1 = "", line2 = ""] = lines.map((item) => escapeSvgText(item));
  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
      <g transform="rotate(-24 160 120)">
        <text x="24" y="112" font-size="15" font-family="Arial, PingFang SC, Microsoft YaHei, sans-serif" fill="#0f172a" fill-opacity="0.1">
          ${line1}
        </text>
        <text x="24" y="144" font-size="13" font-family="Arial, PingFang SC, Microsoft YaHei, sans-serif" fill="#334155" fill-opacity="0.14">
          ${line2}
        </text>
      </g>
    </svg>
  `;
  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
};

const watermarkStyle = computed(() => ({
  backgroundImage: createWatermarkImage([userDisplay.value, `${watermarkScopeLabel.value} ${watermarkDate}`.trim()]),
}));

const notifUnreadCount = computed(() => notifRows.value.filter((item) => String(item?.status || "") === "UNREAD").length);
const notifDisplayRows = computed(() =>
  notifOnlyUnread.value ? notifRows.value.filter((item) => String(item?.status || "") === "UNREAD") : notifRows.value,
);
const notifStatusFormatter = (_row: unknown, _column: unknown, value: unknown) => toZhStatus(value);
const dashboardRoute = computed(() => (authScope.value === "PLATFORM" ? "/platform/tenants" : "/dashboard"));
const profileRoute = computed(() => "/profile");
const routeViewKey = computed(() => {
  const scopeKey = authScope.value === "PLATFORM" ? "PLATFORM" : "TENANT";
  const tenantKey = authScope.value === "TENANT" ? String(selectedTenantSwitchId.value || 0) : "platform";
  const contextKey = tenantContextVersion.value || "0";
  return `${scopeKey}:${tenantKey}:${contextKey}:${route.fullPath}`;
});

const withSuppressedAuthRefresh = <T,>(callback: () => T): T => {
  suppressNextAuthRefresh = true;
  try {
    return callback();
  } finally {
    suppressNextAuthRefresh = false;
  }
};

const normalizeTenantSwitchRoutePath = (path: string) => {
  if (path === "/permissions") {
    return "/menus";
  }
  return path;
};

const cloneRouteQuery = (query: Record<string, unknown>): LocationQueryRaw => {
  const nextQuery: LocationQueryRaw = {};
  Object.keys(query || {}).forEach((key) => {
    const value = query[key];
    if (Array.isArray(value)) {
      nextQuery[key] = value.map((item) => String(item));
      return;
    }
    if (value === undefined || value === null || value === "") {
      return;
    }
    nextQuery[key] = String(value);
  });
  return nextQuery;
};

const resolveTenantSwitchTargetRoute = (
  sourcePath: string,
  sourceQuery: Record<string, unknown>,
  sourceHash: string,
): RouteLocationRaw => {
  const normalizedPath = normalizeTenantSwitchRoutePath(sourcePath);
  if (tenantSwitchSharedRoutePaths.has(normalizedPath)) {
    return {
      path: normalizedPath,
      query: cloneRouteQuery(sourceQuery),
      hash: sourceHash || undefined,
    };
  }
  const hasTargetMenu = menus.value.some((item) => item.routePath === normalizedPath);
  if (hasTargetMenu) {
    return {
      path: normalizedPath,
      query: cloneRouteQuery(sourceQuery),
      hash: sourceHash || undefined,
    };
  }
  return { path: "/dashboard" };
};

const loadNotifRows = async () => {
  await notificationStore.loadRows();
};

const showNotifDialog = async () => {
  notifDialogVisible.value = true;
  await loadNotifRows();
};

const handleNotifMarkRead = async (id: number) => {
  await notificationStore.markRead(id);
  ElMessage.success("已标记为已读");
};

const handleNotifMarkAllRead = async () => {
  const affected = await notificationStore.markAllRead();
  ElMessage.success(affected > 0 ? `已标记 ${affected} 条通知为已读` : "没有未读通知");
};

const refreshLayoutState = async () => {
  authStore.syncFromStorage();
  await menuStore.refreshContext();
  await notificationStore.refreshContext();
};

const logoutAll = async () => {
  const nextLoginPath = resolveLoginPath(authScope.value, tenantCode.value);
  try {
    await logoutAllAuth();
  } catch (_e) {
    // ignore
  }
  await router.replace(nextLoginPath);
  withSuppressedAuthRefresh(() => {
    authStore.clearAuthStorage();
  });
  menuStore.reset();
  notificationStore.reset();
  ElMessage.success("已退出全部设备");
};

const handleUserCommand = async (command: string) => {
  if (command === "dashboard") {
    await router.push(dashboardRoute.value);
    return;
  }
  if (command === "profile") {
    await router.push(profileRoute.value);
    return;
  }
  if (command === "logout") {
    await logoutAll();
  }
};

const handleTenantSwitchCommand = async (value: string | number) => {
  const targetTenantId = Number(value);
  if (!Number.isFinite(targetTenantId) || targetTenantId <= 0) {
    return;
  }
  if (tenantSwitching.value || targetTenantId === selectedTenantSwitchId.value) {
    return;
  }
  menuStore.setTenantSwitching(true);
  const sourcePath = route.path;
  const sourceQuery = { ...(route.query as Record<string, unknown>) };
  const sourceHash = route.hash;
  try {
    const resp = await switchTenant({ tenantId: targetTenantId });
    withSuppressedAuthRefresh(() => {
      authStore.saveAuthPayload(resp?.data || null);
    });
    await refreshLayoutState();
    await router.push(resolveTenantSwitchTargetRoute(sourcePath, sourceQuery, sourceHash));
    ElMessage.success("租户切换成功");
  } finally {
    menuStore.setTenantSwitching(false);
  }
};

const handleVisibilityChange = () => {
  if (document.visibilityState === "visible") {
    notificationStore.handleVisibilityVisible();
  }
};

const handleAuthTokenUpdated = () => {
  if (suppressNextAuthRefresh) {
    return;
  }
  void refreshLayoutState();
};

const handleAuthStorageChanged = (event: StorageEvent) => {
  if (event.key !== "authVersion" && event.key !== "tenantContextVersion") {
    return;
  }
  ElMessage.info("检测到其他标签页更新了登录状态，当前页面将刷新");
  window.location.reload();
};

onMounted(async () => {
  window.addEventListener("auth:token-updated", handleAuthTokenUpdated as EventListener);
  window.addEventListener("storage", handleAuthStorageChanged);
  document.addEventListener("visibilitychange", handleVisibilityChange);

  try {
    await refreshLayoutState();
  } finally {
    appearanceStore.markBootstrapped();
  }
});

onUnmounted(() => {
  document.removeEventListener("visibilitychange", handleVisibilityChange);
  window.removeEventListener("auth:token-updated", handleAuthTokenUpdated as EventListener);
  window.removeEventListener("storage", handleAuthStorageChanged);
  notificationStore.stopRealtime();
});
</script>

<style scoped>
.layout-root {
  position: relative;
  height: 100vh;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
}

.layout-watermark {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 320px 240px;
}

.top-layout {
  flex: 1;
  min-width: 0;
}

.app-header,
.sub-header {
  display: flex;
  align-items: center;
  gap: var(--wo-shell-gap);
  padding: 0 20px;
}

.app-header {
  background: var(--wo-app-header-bg);
  color: var(--wo-app-header-text);
  box-shadow: var(--wo-header-shadow);
}

.sub-header {
  background: var(--wo-sub-header-bg);
  border-bottom: 1px solid var(--wo-sub-header-border);
}

.brand-area,
.sidebar-brand {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sidebar-brand {
  height: 64px;
  padding: 0 20px;
  background: var(--wo-sidebar-brand-bg);
  border-bottom: 1px solid var(--wo-sidebar-border);
}

.brand-logo {
  /* max-width: 128px; */
  max-height: 45px;
  border-radius: 8px;
  object-fit: contain;
}

.brand-text {
  color: var(--wo-app-header-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.brand-text--light {
  color: var(--wo-sidebar-text-active);
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 10;
  min-width: 0;
}

.top-nav-item {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--wo-top-nav-text);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.top-nav-item:hover,
.top-nav-item--active {
  color: var(--wo-app-header-text);
  background: var(--wo-top-nav-active-bg);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.header-actions--light {
  color: var(--wo-light-action-text);
}

.sub-header-left {
  flex: 1;
  min-width: 0;
}

.user-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.user-avatar {
  width: var(--wo-header-avatar-size);
  height: var(--wo-header-avatar-size);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wo-header-action-bg);
  color: var(--wo-header-action-text);
}

.user-avatar--light {
  background: var(--wo-profile-avatar-bg);
  color: var(--wo-profile-avatar-text);
}

.user-avatar svg {
  width: var(--wo-header-avatar-icon-size);
  height: var(--wo-header-avatar-icon-size);
}

.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.user-meta--light .user-name {
  color: var(--el-text-color-primary);
}

.user-meta--light .user-scope {
  color: var(--el-text-color-secondary);
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--wo-app-header-text);
}

.user-scope {
  font-size: 11px;
  color: var(--wo-top-nav-text);
}

.tenant-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: var(--wo-header-action-bg);
  color: var(--wo-header-action-text);
  cursor: pointer;
}

.tenant-switch-btn--light {
  background: var(--wo-light-action-bg);
  color: var(--wo-light-action-text);
}

.tenant-switch-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tenant-switch-arrow {
  font-size: 10px;
}

.action-divider {
  width: 1px;
  height: 24px;
  background: var(--wo-header-action-divider);
}

.action-divider--light {
  background: var(--wo-light-action-divider);
}

.icon-btn {
  width: var(--wo-header-action-size);
  height: var(--wo-header-action-size);
  border: none;
  border-radius: 10px;
  padding: 0;
  background: var(--wo-header-action-bg);
  color: var(--wo-header-action-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn--light {
  background: var(--wo-light-action-bg);
  color: var(--wo-light-action-text);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.layout-aside {
  background: var(--wo-sidebar-bg);
  border-right: none;
}

.sidebar-menu {
  height: calc(100% - 64px);
  border-right: none;
  background: transparent;
}

.sidebar-menu :deep(.el-menu-item) {
  color: var(--wo-sidebar-text);
  border-radius: 8px;
  margin: 4px 8px;
}

.sidebar-menu :deep(.el-menu-item:hover) {
  color: var(--wo-sidebar-text-active);
  background: var(--wo-sidebar-item-hover);
}

.sidebar-menu :deep(.el-menu-item.is-active) {
  color: var(--wo-sidebar-text-active);
  background: var(--wo-sidebar-item-active-bg);
}

.main-content {
  background: var(--wo-main-content-bg);
  padding: var(--wo-main-content-padding);
}

.notif-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.notif-tags,
.notif-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

:deep(.notif-mark-all-read-btn.el-button--primary.is-plain) {
  background: rgba(var(--wo-theme-rgb), 0.08) !important;
  border-color: var(--wo-brand-primary) !important;
  color: var(--wo-brand-primary-dark-2) !important;
}

:deep(.notif-mark-all-read-btn.el-button--primary.is-plain:hover) {
  background: rgba(var(--wo-theme-rgb), 0.14) !important;
  color: var(--wo-brand-primary-dark-2) !important;
}

:deep(.notif-mark-read-btn.el-button.is-link) {
  color: var(--wo-brand-primary-dark-2) !important;
  font-weight: 600;
}

:deep(.notif-mark-read-btn.el-button.is-link:hover) {
  color: var(--wo-brand-primary) !important;
}

.notif-read-tag {
  color: #9ca3af;
  font-size: 12px;
}
</style>
