/**
 * UI 视觉统一层：配色、动效、焦点与组件反馈。
 * 加载顺序：在 global.css 之后，仅覆盖样式不改布局与 DOM。
 */

/* ---------- 顶栏 ---------- */
nav.notepad-navbar.notepad-navbar--fixed {
  background-color: var(--navbar-surface) !important;
  border-color: var(--navbar-surface-border) !important;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  box-shadow: var(--shadow-sm);
}

.notepad-navbar__brand.app-heading {
  color: var(--brand-heading-color) !important;
  text-shadow: none;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.note-sidebar-toggle {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.note-sidebar-toggle .icon-bar {
  background-color: var(--navbar-fg) !important;
}

/* 顶栏主工具条：悬停 / 按下反馈 */
.notepad-navbar__tools-scroll > .notepad-navbar__tool > .notepad-navbar__icon-btn,
.notepad-navbar__more-wrap--mobile-only > .notepad-navbar__icon-btn {
  border-radius: var(--radius-md);
  transition: background-color var(--t-fast) var(--ease-ui),
    transform var(--t-fast) var(--ease-ui), opacity var(--t-fast) var(--ease-ui);
}

.notepad-navbar__tools-scroll > .notepad-navbar__tool > .notepad-navbar__icon-btn:hover,
.notepad-navbar__more-wrap--mobile-only > .notepad-navbar__icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.notepad-navbar__tools-scroll > .notepad-navbar__tool > .notepad-navbar__icon-btn:active,
.notepad-navbar__more-wrap--mobile-only > .notepad-navbar__icon-btn:active {
  transform: scale(0.94);
  background-color: rgba(255, 255, 255, 0.14);
}

.notepad-navbar__tools-scroll > .notepad-navbar__tool > .notepad-navbar__icon-btn:focus-visible,
.notepad-navbar__more-wrap--mobile-only > .notepad-navbar__icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- 侧栏笔记行 ---------- */
.note-sidebar-item {
  transition: background-color var(--t-fast) var(--ease-ui),
    border-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui);
}

.note-sidebar-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.dark .note-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.note-sidebar-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- 表单与编辑区 ---------- */
.form-control {
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-primary);
  transition: border-color var(--t-fast) var(--ease-ui),
    box-shadow var(--t-fast) var(--ease-ui), background-color var(--t-fast) var(--ease-ui);
}

.form-control:hover {
  border-color: var(--c-text-secondary);
}

.form-control:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-muted);
  outline: none;
}

#noteTitle.form-control,
#note {
  border-color: var(--c-border-primary);
}

#note:focus,
#noteTitle:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-muted);
  outline: none;
}

.dark .form-control {
  background-color: var(--c-bg-primary);
  border-color: var(--c-border-strong);
  color: var(--c-text-primary);
}

.dark #note,
.dark #noteTitle {
  background-color: var(--c-bg-primary);
  color: var(--c-text-primary);
}

/* ---------- 弹窗 ---------- */
.modal-content {
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--c-border-primary);
  /* 正文略柔化，避免纯黑硬对比 */
  color: color-mix(in srgb, var(--c-text-primary) 74%, var(--c-text-secondary) 26%);
}

.modal-header .modal-title,
.modal-title.custom-modal-title,
.modal-header h4.modal-title {
  color: color-mix(in srgb, var(--c-text-primary) 58%, var(--c-text-secondary) 42%);
  font-weight: 600;
}

/* 弹窗内输入区：仍清晰可读，略柔于顶栏纯主色 */
.modal .form-control:not(.btn) {
  color: color-mix(in srgb, var(--c-text-primary) 86%, var(--c-text-secondary) 14%);
}

.modal .form-control::placeholder {
  color: color-mix(in srgb, var(--c-text-secondary) 88%, transparent);
}

.dark .modal .form-control::placeholder {
  color: color-mix(in srgb, var(--c-text-secondary) 75%, transparent);
}

.modal-header {
  border-bottom-color: var(--c-border-primary) !important;
  background-color: var(--surface-subtle);
}

.modal-footer {
  border-top-color: var(--c-border-primary) !important;
  background-color: var(--surface-subtle);
}

.modal-header .close {
  color: var(--c-text-secondary) !important;
  text-shadow: none !important;
  opacity: 0.75;
  border-radius: var(--radius-sm);
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  transition: background-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui),
    opacity var(--t-fast) var(--ease-ui);
}

.modal-header .close:hover,
.modal-header .close:focus {
  opacity: 1;
  color: color-mix(in srgb, var(--c-text-primary) 68%, var(--c-text-secondary) 32%) !important;
  background-color: rgba(0, 0, 0, 0.05);
}

.dark .modal-header .close:hover,
.dark .modal-header .close:focus {
  background-color: rgba(255, 255, 255, 0.08);
}

.dark .modal-content {
  border-color: var(--c-border-primary);
  color: color-mix(in srgb, var(--c-text-primary) 88%, var(--c-text-secondary) 12%);
}

.dark .modal-header .modal-title,
.dark .modal-title.custom-modal-title,
.dark .modal-header h4.modal-title {
  color: color-mix(in srgb, var(--c-text-primary) 80%, var(--c-text-secondary) 20%);
}

.dark .modal .form-control:not(.btn) {
  color: color-mix(in srgb, var(--c-text-primary) 92%, var(--c-text-secondary) 8%);
}

.dark .modal-header,
.dark .modal-footer {
  background-color: var(--surface-subtle);
}

/* ---------- 首选项面板 ---------- */
.preferences-panel {
  border-color: var(--c-border-primary);
  background: var(--surface-subtle);
}

.preferences-panel .form-group {
  border-bottom-color: var(--c-border-primary);
}

/* ---------- 门禁 ---------- */
.home-auth__error {
  color: var(--c-danger) !important;
}

/* ---------- SweetAlert2 通用（非 compact） ---------- */
.swal2-popup:not(.swal-compact-confirm) {
  border: 1px solid var(--c-border-primary) !important;
  box-shadow: var(--shadow-modal) !important;
}

.dark .swal2-popup:not(.swal-compact-confirm) {
  background: var(--surface-elevated) !important;
  color: var(--c-text-primary) !important;
}

/* ---------- 无障碍：减少动画偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .notepad-navbar__tools-scroll > .notepad-navbar__tool > .notepad-navbar__icon-btn,
  .notepad-navbar__more-wrap--mobile-only > .notepad-navbar__icon-btn,
  .btn,
  .note-sidebar-item,
  .form-control,
  .home-auth__card {
    transition: none !important;
  }

  .notepad-navbar__tools-scroll > .notepad-navbar__tool > .notepad-navbar__icon-btn:active,
  .notepad-navbar__more-wrap--mobile-only > .notepad-navbar__icon-btn:active,
  .btn:active {
    transform: none;
  }
}