/* ============================================================
   影路传媒中台 — Casdoor 控制台 / 登录页 品牌主题层（薄层）
   ------------------------------------------------------------
   架构：
     Casdoor 原生 UI → Ant Design 原生组件 → darkAlgorithm
     → 影路 Brand Token（nginx 层替换 bundle 硬编码浅色 Token）
     → 本文件（仅品牌点缀，少量 scoped CSS）
   ------------------------------------------------------------
   禁止在这里做 .ant-table / .ant-input / .ant-modal 等全局重写；
   组件视觉统一由 Theme Token 控制。
   ============================================================ */

/* ---------- 品牌变量 ---------- */
html[data-yr-theme="dark"] {
  --yr-bg: #070d1d;
  --yr-bg-layout: #091124;
  --yr-bg-sider: #08101f;
  --yr-surface: #0d1730;
  --yr-surface-2: #131e3d;
  --yr-primary: #5c6cff;
  --yr-primary-hover: #7080ff;
  --yr-purple: #8b5cff;
  --yr-text: #f4f7ff;
  --yr-text-2: #a9b1ca;
  --yr-text-3: #6f7895;
  --yr-border: rgba(119, 142, 255, 0.18);
}

/* ---------- 页面基底 ---------- */
html[data-yr-theme="dark"],
html[data-yr-theme="dark"] body {
  background-color: var(--yr-bg) !important;
  background-image:
    radial-gradient(1100px 520px at 82% -8%, rgba(92, 108, 255, 0.09), transparent 62%),
    radial-gradient(900px 520px at -6% 108%, rgba(139, 92, 255, 0.07), transparent 60%) !important;
  background-attachment: fixed;
  color: var(--yr-text);
}

/* 滚动条 / 选区 / 焦点 */
html[data-yr-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color: rgba(119, 142, 255, 0.25) transparent;
}
html[data-yr-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-yr-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-yr-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: rgba(119, 142, 255, 0.22);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}
html[data-yr-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(119, 142, 255, 0.4);
}
html[data-yr-theme="dark"] ::selection {
  background: rgba(92, 108, 255, 0.3);
}
html[data-yr-theme="dark"] :focus-visible {
  outline: 2px solid var(--yr-primary);
  outline-offset: 2px;
}

/* ---------- 侧边栏品牌（scoped，无 !important） ---------- */
html[data-yr-theme="dark"] .ant-layout-sider {
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(92, 108, 255, 0.08), transparent 60%),
    linear-gradient(180deg, var(--yr-bg-sider), #060b18) !important;
  border-right: 1px solid rgba(119, 142, 255, 0.12);
}
html[data-yr-theme="dark"] .ant-layout-sider .ant-menu-item,
html[data-yr-theme="dark"] .ant-layout-sider .ant-menu-submenu-title {
  border-radius: 10px;
  color: var(--yr-text-2);
  transition:
    color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}
html[data-yr-theme="dark"] .ant-layout-sider .ant-menu-item:hover,
html[data-yr-theme="dark"] .ant-layout-sider .ant-menu-submenu-title:hover {
  background: rgba(92, 108, 255, 0.1) !important;
  color: var(--yr-text) !important;
}
html[data-yr-theme="dark"] .ant-layout-sider .ant-menu-item-selected {
  background: linear-gradient(135deg, rgba(92, 108, 255, 0.92), rgba(139, 92, 255, 0.82)) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(92, 108, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html[data-yr-theme="dark"] .ant-layout-sider .ant-menu-item-selected .anticon {
  color: #fff !important;
}
html[data-yr-theme="dark"] .ant-layout-sider .ant-menu-item::after,
html[data-yr-theme="dark"] .ant-layout-sider .ant-menu-submenu::after {
  border: none !important;
}

/* ---------- 顶栏玻璃 ---------- */
html[data-yr-theme="dark"] .ant-layout-header {
  background: rgba(8, 14, 30, 0.72) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(119, 142, 255, 0.12);
}

/* ---------- 主按钮品牌渐变（scoped） ---------- */
html[data-yr-theme="dark"] .ant-btn-primary {
  background: linear-gradient(135deg, var(--yr-primary) 0%, var(--yr-purple) 130%) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(92, 108, 255, 0.25);
}
html[data-yr-theme="dark"] .ant-btn-primary:hover {
  background: linear-gradient(135deg, var(--yr-primary-hover) 0%, #9d76ff 130%) !important;
  box-shadow: 0 4px 22px rgba(92, 108, 255, 0.38);
}

/* ---------- 品牌 logo 白底融合（占位图 / 表格应用 Logo，multiply 白像素变透明） ---------- */
html[data-yr-theme="dark"] img[src*="logo"],
html[data-yr-theme="dark"] .ant-table img[src*="icon."],
html[data-yr-theme="dark"] .ant-table img[src*="login-bg"] {
  mix-blend-mode: multiply;
  filter: brightness(1.8) contrast(1.05);
  opacity: 0.92;
}

/* ---------- 静态弹层兜底（message/notification/confirm 渲染在
   ConfigProvider 之外，不继承暗色 Token，按官方推荐方式补少量 scoped 样式） ---------- */
html[data-yr-theme="dark"] .ant-message-notice-content,
html[data-yr-theme="dark"] .ant-notification-notice {
  background: var(--yr-surface-2) !important;
  border: 1px solid var(--yr-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
  color: var(--yr-text);
}
html[data-yr-theme="dark"] .ant-message .ant-message-notice-content {
  color: var(--yr-text);
}
html[data-yr-theme="dark"] .ant-notification-notice-title,
html[data-yr-theme="dark"] .ant-notification-notice-description {
  color: var(--yr-text) !important;
}
html[data-yr-theme="dark"] .ant-notification-notice-description {
  color: var(--yr-text-2) !important;
}
html[data-yr-theme="dark"] .ant-modal-confirm .ant-modal-content {
  background: linear-gradient(180deg, var(--yr-surface-2), var(--yr-surface)) !important;
  border: 1px solid var(--yr-border) !important;
}
html[data-yr-theme="dark"] .ant-modal-confirm-title {
  color: var(--yr-text) !important;
}
html[data-yr-theme="dark"] .ant-modal-confirm-content {
  color: var(--yr-text-2) !important;
}

/* ---------- 登录页品牌（覆盖应用 formCss 浅色卡片，保留原生结构） ---------- */
html[data-yr-theme="dark"] .login-panel,
html[data-yr-theme="dark"] .login-panel-dark {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    rgba(12, 21, 40, 0.82) !important;
  border: 1px solid rgba(119, 142, 255, 0.2) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), 0 0 40px rgba(92, 108, 255, 0.08) !important;
  backdrop-filter: blur(24px);
}
html[data-yr-theme="dark"] .yr-brandtitle {
  color: var(--yr-text) !important;
}
html[data-yr-theme="dark"] .yr-brandsub {
  color: var(--yr-text-2) !important;
}
html[data-yr-theme="dark"] .login-panel .ant-input,
html[data-yr-theme="dark"] .login-panel .ant-input-affix-wrapper,
html[data-yr-theme="dark"] .login-username-input,
html[data-yr-theme="dark"] .login-password-input,
html[data-yr-theme="dark"] .verification-code-input {
  background: rgba(8, 15, 33, 0.65) !important;
  border-color: var(--yr-border) !important;
  color: var(--yr-text) !important;
}
html[data-yr-theme="dark"] .login-button {
  background: linear-gradient(135deg, var(--yr-primary), var(--yr-purple)) !important;
  box-shadow: 0 8px 22px rgba(92, 108, 255, 0.3) !important;
}
html[data-yr-theme="dark"] .login-panel .ant-tabs-tab-active .ant-tabs-tab-btn,
html[data-yr-theme="dark"] .login-panel a,
html[data-yr-theme="dark"] .login-forget-password a,
html[data-yr-theme="dark"] .login-signup-link a {
  color: var(--yr-primary-hover) !important;
}
html[data-yr-theme="dark"] .login-logo-box img,
html[data-yr-theme="dark"] a[href*="casdoor.org"],
html[data-yr-theme="dark"] a[href*="casbin.org"] {
  filter: brightness(0) invert(1) opacity(0.7);
}


/* Unified sign-in shell: the existing Casdoor form and all authentication factors are retained. */
html.yr-unified-login .loginBackground,
html.yr-unified-login .loginBackgroundDark {
  background: radial-gradient(ellipse at 16% 18%, rgba(92,108,255,.2), transparent 48%),
    radial-gradient(ellipse at 85% 80%, rgba(139,92,255,.14), transparent 46%), #070d1d !important;
  min-height: 100vh;
}
html.yr-unified-login .login-content {
  min-height: 100vh; height: auto !important; padding: 48px 20px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-sizing: border-box;
}
html.yr-unified-login .login-panel,
html.yr-unified-login .login-panel-dark {
  position: relative !important; inset: auto !important; transform: none !important;
  width: 480px !important; max-width: 100% !important; height: auto !important;
  padding: 36px 40px 28px !important; margin: 0 !important; box-sizing: border-box;
  border-radius: 24px !important;
  background: linear-gradient(155deg, #172143, #0d162c 65%) !important;
  color: #f4f7ff !important;
}
#yr-login-brand { text-align: center; margin-bottom: 26px; }
#yr-login-brand .yr-login-mark { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 16px; background: linear-gradient(135deg,#36a9ff,#855aff); box-shadow: 0 10px 30px #5367ff40; color: white; font-size: 22px; font-weight: 700; }
#yr-login-brand h1 { color: #f4f7ff; font-size: 26px; font-weight: 650; margin: 18px 0 6px; letter-spacing: 1px; }
#yr-login-brand p { color: #8794b5; font-size: 11px; letter-spacing: 3px; margin: 0; }
#yr-login-brand .yr-login-description { color: #a9b1ca; font-size: 14px; letter-spacing: 0; margin-top: 22px; }
html.yr-unified-login .login-logo-box { display: none !important; }
html.yr-unified-login .login-form { margin: 0 !important; padding: 0 !important; width: 100% !important; }
html.yr-unified-login #normal_login { width: 100% !important; }
html.yr-unified-login .login-languages { top: 18px !important; right: 18px !important; color: #8794b5; }
html.yr-unified-login .login-username-input,
html.yr-unified-login .login-password-input { min-height: 48px; border-radius: 12px; }
html.yr-unified-login .login-button { width: 100%; min-height: 48px; border-radius: 12px; font-weight: 600; }
html.yr-unified-login .login-signup-link { color: #a9b1ca; }
@media (max-width: 540px) {
  html.yr-unified-login .login-content { padding: 24px 16px !important; }
  html.yr-unified-login .login-panel, html.yr-unified-login .login-panel-dark { padding: 28px 22px !important; }
}
/* Override Casdoor's intrinsic flex width so the native form also fits narrow screens. */
html.yr-unified-login { overflow-x: clip; }
html.yr-unified-login .loginBackground,
html.yr-unified-login .loginBackgroundDark,
html.yr-unified-login .login-content {
  width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  box-sizing: border-box;
}
html.yr-unified-login .login-panel,
html.yr-unified-login .login-panel-dark { min-width: 0 !important; flex-shrink: 1 !important; }
html.yr-unified-login .yr-brandtitle,
html.yr-unified-login .yr-brandsub { display: none !important; }
html.yr-unified-login .loginBackground,
html.yr-unified-login .loginBackgroundDark { height: auto !important; align-items: flex-start !important; }
html.yr-unified-login #root,
html.yr-unified-login #parent-area { height: auto !important; min-height: 100vh; }
html.yr-unified-login .login-forget-password { width: 100% !important; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }