/*
 * 素曜白全局表面收口
 *
 * 白色主题只使用纯白页面与卡片表面。功能色仍可用于按钮、状态、标签、
 * 图表和选中态，但不得再作为卡片/面板的蓝白渐变底色。
 * 本文件必须在所有页面样式之后加载，用来消除各业务模块遗留的局部渐变。
 */

html[data-app-theme="light"] {
  color-scheme: light;
  --bg: #fff;
  --panel: #fff;
  --system-card-bg: #fff;
  --theme-canvas: #fff;
  --theme-surface: #fff;
  --theme-surface-raised: #fff;
  --work-bg: #fff;
  --work-surface: #fff;
  --suyawb-card-bg: none;
}

html[data-app-theme="light"],
html[data-app-theme="light"] body,
html[data-app-theme="light"] body .app-shell,
html[data-app-theme="light"] body main,
html[data-app-theme="light"] body .main,
html[data-app-theme="light"] body .main-content,
html[data-app-theme="light"] body .content,
html[data-app-theme="light"] body .page,
html[data-app-theme="light"] body .view,
html[data-app-theme="light"] body .view.active,
html[data-app-theme="light"] body #dashboard,
html[data-app-theme="light"] body #todayWork,
html[data-app-theme="light"] body #directorDashboard,
html[data-app-theme="light"] body #schedule,
html[data-app-theme="light"] body #patients,
html[data-app-theme="light"] body #billing,
html[data-app-theme="light"] body #monthlyExpense,
html[data-app-theme="light"] body #pendingInvoices,
html[data-app-theme="light"] body #inventory,
html[data-app-theme="light"] body #implantRecords,
html[data-app-theme="light"] body #denture,
html[data-app-theme="light"] body #communicationVideos,
html[data-app-theme="light"] body #system,
html[data-app-theme="light"] body #dashboardTaskCenter.today-work-page,
html[data-app-theme="light"] body #dashboardTaskCenter.today-work-page .today-work-card,
html[data-app-theme="light"] body #dashboardTaskCenter.today-work-page .today-work-main {
  background-color: #fff !important;
  background-image: none !important;
}

html[data-app-theme="light"] body :is(
  #dashboard,
  #todayWork,
  #directorDashboard,
  #schedule,
  #patients,
  #billing,
  #monthlyExpense,
  #pendingInvoices,
  #inventory,
  #implantRecords,
  #denture,
  #communicationVideos,
  #system
).view {
  background-color: #fff !important;
  background-image: none !important;
}

html[data-app-theme="light"] body .main > :is(
  #dashboard,
  #todayWork,
  #directorDashboard,
  #schedule,
  #patients,
  #billing,
  #monthlyExpense,
  #pendingInvoices,
  #inventory,
  #implantRecords,
  #denture,
  #communicationVideos,
  #system
).view.active {
  background-color: #fff !important;
  background-image: none !important;
}

/* Login belongs to the same white-theme contract. */
html[data-app-theme="light"] body.auth-locked .login-screen,
html[data-app-theme="light"] body.auth-locked .login-pastel-background,
html[data-app-theme="light"] body.auth-locked .login-illustration-panel,
html[data-app-theme="light"] body.auth-locked .login-form-panel,
html[data-app-theme="light"] body.auth-locked .login-card,
html[data-app-theme="light"] body.auth-locked .login-proof > span {
  background-color: #fff !important;
  background-image: none !important;
}

html[data-app-theme="light"] body.auth-locked .login-pastel-background,
html[data-app-theme="light"] body.auth-locked .login-pastel-background i,
html[data-app-theme="light"] body.auth-locked .login-aurora,
html[data-app-theme="light"] body.auth-locked .login-illustration-panel::before,
html[data-app-theme="light"] body.auth-locked .login-form-panel::before {
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* The approved login screen keeps its quiet medical-blue dotted canvas. */
html[data-app-theme="light"] body.auth-locked .login-screen.login-screen-saas {
  background-color: #eff6fb !important;
  background-image:
    radial-gradient(ellipse at 12% 88%, rgba(181, 218, 231, .46) 0, rgba(207, 230, 238, .24) 31%, transparent 58%),
    radial-gradient(ellipse at 88% 14%, rgba(181, 215, 239, .48) 0, rgba(208, 230, 244, .24) 32%, transparent 59%),
    linear-gradient(135deg, #f5f9fc 0%, #edf5fa 50%, #f4f9fc 100%) !important;
  background-position: 0 0, 0 0, 0 0 !important;
  background-size: 100% 100%, 100% 100%, 100% 100% !important;
}

html[data-app-theme="light"] body.auth-locked .login-screen-saas .login-form-panel {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-app-theme="light"] body.auth-locked .login-card input,
html[data-app-theme="light"] body.auth-locked .login-card input:is(:hover, :focus) {
  background-color: #fff !important;
  background-image: none !important;
}

/* All semantic content surfaces share one neutral white material. */
html[data-app-theme="light"] body :is(
  [class~="card"],
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-dialog"],
  [class*="-dialog "],
  [class$="-drawer"],
  [class*="-drawer "],
  [class$="-surface"],
  [class*="-surface "],
  [class$="-workspace"],
  [class*="-workspace "],
  [class$="-console"],
  [class*="-console "],
  [class$="-board"],
  [class*="-board "],
  [class$="-wrap"],
  [class*="-wrap "]
):not(button):not([class*="backdrop"]):not([class*="overlay"]) {
  background-color: #fff !important;
  background-image: none !important;
}

/* Existing high-specificity module rules use IDs; this matching ID scope wins
   those selectors without coupling the white theme to every feature name. */
html[data-app-theme="light"] body [id] :is(
  [class~="card"],
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-dialog"],
  [class*="-dialog "],
  [class$="-surface"],
  [class*="-surface "],
  [class$="-workspace"],
  [class*="-workspace "],
  [class$="-board"],
  [class*="-board "],
  [class$="-wrap"],
  [class*="-wrap "]
):not(button):not([class*="backdrop"]):not([class*="overlay"]) {
  background-color: #fff !important;
  background-image: none !important;
}

/* View IDs add enough specificity to override legacy per-page gradient locks. */
html[data-app-theme="light"] body :is(
  #dashboard,
  #todayWork,
  #directorDashboard,
  #schedule,
  #patients,
  #billing,
  #monthlyExpense,
  #pendingInvoices,
  #inventory,
  #implantRecords,
  #denture,
  #communicationVideos,
  #system
) :is(
  [class~="card"],
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-dialog"],
  [class*="-dialog "],
  [class$="-surface"],
  [class*="-surface "],
  [class$="-workspace"],
  [class*="-workspace "],
  [class$="-board"],
  [class*="-board "],
  [class$="-wrap"],
  [class*="-wrap "]
):not(button):not([class*="backdrop"]):not([class*="overlay"]) {
  background-color: #fff !important;
  background-image: none !important;
}

/* The navigation rail and data grid remain white; selection/primary actions
   keep their functional accent color. */
html[data-app-theme="light"] body :is(.sidebar, .topbar, .page-header),
html[data-app-theme="light"] body .sidebar .nav-item:not(.active),
html[data-app-theme="light"] body table :is(thead, tbody, tfoot, tr, th, td) {
  background-color: #fff !important;
  background-image: none !important;
}

/* 种植记录的标题栏、签名区和筛选控件曾使用独立的浅蓝表面。 */
html[data-app-theme="light"] body #implantRecords .implant-record-ledger-filters,
html[data-app-theme="light"] body #implantRecords .implant-record-ledger-filters :is(input, select),
html[data-app-theme="light"] body #implantRecords .implant-ledger-record,
html[data-app-theme="light"] body #implantRecords .implant-ledger-record > header,
html[data-app-theme="light"] body #implantRecords .implant-ledger-table-wrap,
html[data-app-theme="light"] body #implantRecords .implant-ledger-signatures,
html[data-app-theme="light"] body #implantRecords .implant-ledger-signatures button {
  background-color: #fff !important;
  background-image: none !important;
}

/* 已确认的白色主题侧栏方案：深蓝底、无边框、蓝色选中态。 */
html[data-app-theme="light"] body .app-shell > .sidebar,
html[data-app-theme="light"] body .app-shell > .sidebar:hover,
html[data-app-theme="light"] body .app-shell > .sidebar:focus-within,
html[data-app-theme="light"] body .app-shell > .sidebar.sidebar-hold-open,
html[data-app-theme="light"] body .app-shell > .sidebar.sidebar-force-closed {
  color: #d8e5f1 !important;
  border: 0 !important;
  background-color: #061a2d !important;
  background-image: linear-gradient(180deg, #061a2d, #031321) !important;
  box-shadow: 8px 0 26px rgba(3, 19, 33, .14) !important;
}

html[data-app-theme="light"] body .sidebar .sidebar-logo {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-app-theme="light"] body .sidebar .nav-item,
html[data-app-theme="light"] body .sidebar:hover .nav-item,
html[data-app-theme="light"] body .sidebar:focus-within .nav-item,
html[data-app-theme="light"] body .sidebar.sidebar-hold-open .nav-item,
html[data-app-theme="light"] body .sidebar.sidebar-force-closed .nav-item {
  color: #c2d1df !important;
  -webkit-text-fill-color: #c2d1df !important;
  border: 0 !important;
  border-radius: 10px !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-app-theme="light"] body .sidebar .nav-item::before,
html[data-app-theme="light"] body .sidebar .nav-item::after {
  display: none !important;
  content: none !important;
}

html[data-app-theme="light"] body .sidebar .nav-item :is(
  span,
  .nav-label,
  .nav-label-desktop,
  .nav-label-tablet,
  .nav-icon
) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-app-theme="light"] body .sidebar .nav-item .nav-icon :is(
  path,
  rect,
  circle,
  line,
  polyline,
  polygon
) {
  color: inherit !important;
  stroke: currentColor !important;
}

html[data-app-theme="light"] body .sidebar .nav-item:hover,
html[data-app-theme="light"] body .sidebar .nav-item:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0 !important;
  background-color: rgba(255, 255, 255, .075) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-app-theme="light"] body .sidebar .nav-item.active,
html[data-app-theme="light"] body .sidebar .nav-item.active:hover,
html[data-app-theme="light"] body .sidebar .nav-item.active:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0 !important;
  background-color: #2f80ed !important;
  background-image: none !important;
  box-shadow: 0 9px 22px rgba(20, 101, 208, .24) !important;
}

html[data-app-theme="light"] body .sidebar .system-version,
html[data-app-theme="light"] body .sidebar .system-version :is(span, b) {
  color: #88a0b7 !important;
  -webkit-text-fill-color: #88a0b7 !important;
}

/* Card headers and table shells must not reintroduce a tinted band. */
html[data-app-theme="light"] body :is(
  .modal-head,
  .panel-head,
  .card-head,
  [class$="-card-head"],
  [class*="-card-head "],
  [class$="-panel-head"],
  [class*="-panel-head "],
  [class$="-dialog-head"],
  [class*="-dialog-head "],
  [class$="-table-wrap"],
  [class*="-table-wrap "]
) {
  background-color: #fff !important;
  background-image: none !important;
}

/* Remove pointer-following cyan/blue light layers from white cards. */
html[data-app-theme="light"] body :is(
  .glow-card,
  .settings-glow-card,
  .suyawb-card,
  [class*="glow-card"]
)::before,
html[data-app-theme="light"] body :is(
  .glow-card,
  .settings-glow-card,
  .suyawb-card,
  [class*="glow-card"]
)::after {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Keep the hierarchy through borders and restrained neutral shadows, not tint. */
html[data-app-theme="light"] body :is(
  [class~="card"],
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-dialog"],
  [class*="-dialog "]
):not(button) {
  --suyawb-glow-alpha: 0;
  box-shadow: 0 6px 20px rgba(30, 41, 59, .055);
}

@media (prefers-reduced-motion: reduce) {
  html[data-app-theme="light"] body :is(.glow-card, .settings-glow-card, [class*="glow-card"]) {
    transition: none !important;
  }
}

/* Shared sidebar scale for both themes. */
html[data-app-theme] body .app-shell > #appSidebar.sidebar .nav > .nav-item {
  font-size: 18px !important;
}

html[data-app-theme] body .app-shell > #appSidebar.sidebar .nav > .nav-item :is(
  .nav-label,
  .nav-label-desktop,
  .nav-label-tablet
) {
  font-size: 18px !important;
}

html[data-app-theme] body .app-shell > #appSidebar.sidebar .nav > .nav-item > .nav-icon,
html[data-app-theme] body .app-shell > #appSidebar.sidebar .nav > .nav-item > svg {
  width: 17px !important;
  height: 17px !important;
  flex-basis: 17px !important;
}

/* Final approved light-theme navigation lock. Keep this block last. */
html[data-app-theme="light"] body .app-shell > #appSidebar.sidebar {
  border: 0 !important;
  background-color: #061a2d !important;
  background-image: linear-gradient(180deg, #061a2d 0%, #031321 100%) !important;
}

html[data-app-theme="light"] body .app-shell > #appSidebar.sidebar .nav > .nav-item {
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

html[data-app-theme="light"] body .app-shell > #appSidebar.sidebar .nav > .nav-item:not(.active) {
  color: #c2d1df !important;
  -webkit-text-fill-color: #c2d1df !important;
  background: transparent !important;
}

html[data-app-theme="light"] body .app-shell > #appSidebar.sidebar .nav > .nav-item:hover,
html[data-app-theme="light"] body .app-shell > #appSidebar.sidebar .nav > .nav-item:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(255, 255, 255, .075) !important;
}

html[data-app-theme="light"] body .app-shell > #appSidebar.sidebar .nav > .nav-item.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #2f80ed !important;
  box-shadow: 0 9px 22px rgba(20, 101, 208, .24) !important;
}

html[data-app-theme="light"] body .app-shell > #appSidebar.sidebar .nav > .nav-item :is(
  span,
  b,
  strong,
  small,
  i,
  svg,
  .nav-icon
) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-app-theme="light"] body .app-shell > #appSidebar.sidebar .nav > .nav-item .nav-icon :is(
  path,
  rect,
  circle,
  line,
  polyline,
  polygon
) {
  color: inherit !important;
  stroke: currentColor !important;
}

html[data-app-theme="light"] body .app-shell > #appSidebar.sidebar .nav > .nav-item::before,
html[data-app-theme="light"] body .app-shell > #appSidebar.sidebar .nav > .nav-item::after {
  content: none !important;
  display: none !important;
}

/* 今日工作图一区域：目录按钮选中后统一为蓝底白字。 */
html[data-app-theme="light"] body #dashboardTaskCenter.today-work-page
  .today-work-folders > button[aria-pressed="true"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #2f80ed !important;
  background-color: #2f80ed !important;
  background-image: none !important;
  box-shadow: 0 7px 16px rgba(37, 99, 235, .18) !important;
}

html[data-app-theme="light"] body #dashboardTaskCenter.today-work-page
  .today-work-folders > button[aria-pressed="true"] :is(span, b) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 医患沟通图二区域：视频分类选中后统一为蓝底白字。 */
html[data-app-theme="light"] body #communicationVideos
  .communication-video-categories > button.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #2f80ed !important;
  background-color: #2f80ed !important;
  background-image: none !important;
  box-shadow: 0 7px 16px rgba(37, 99, 235, .18) !important;
}

html[data-app-theme="light"] body #communicationVideos
  .communication-video-categories > button.active :is(strong, small) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-app-theme="light"] body #communicationVideos
  .communication-video-categories > button.active svg {
  color: #fff !important;
  stroke: #fff !important;
}

html[data-app-theme="light"] body #communicationVideos
  .communication-video-categories > button.active svg path:last-child {
  fill: #fff !important;
  stroke: none !important;
}

/* Keep the full-screen login canvas visible above the global white panel reset. */
html[data-app-theme="light"] body.auth-locked #loginScreen.login-screen-saas > .login-form-panel {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html[data-app-theme="light"] body.auth-locked #loginScreen #desktopRememberLogin {
  box-sizing: border-box !important;
  width: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  flex: 0 0 17px !important;
  padding: 0 !important;
  border: 1px solid #aebdcd !important;
  border-radius: 3px !important;
  background: #fff !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
}

html[data-app-theme="light"] body.auth-locked #loginScreen #desktopRememberLogin:checked {
  border-color: #176b63 !important;
  background: #176b63 !important;
}

html[data-app-theme="light"] body.auth-locked #loginScreen #desktopRememberLogin:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}