/* Keyline Days v2.0.1 — UI theme, z-index, modal & performance hotfix */

:root {
  --z-nav: 20;
  --z-mask: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-fullscreen: 1200;
  --z-debug: 1300;
  --modal-bg-solid: #fffaf4;
  --modal-item-bg-solid: #f2e8dc;
  --modal-text-solid: var(--text-main, #211a16);
  --modal-subtext-solid: var(--text-sub, #8d7664);
}

.theme-cream,
.page-container.theme-cream {
  --modal-bg-solid: #fffaf4;
  --modal-item-bg-solid: #f1e6d8;
}

.theme-coral,
.page-container.theme-coral {
  --modal-bg-solid: #fff3ed;
  --modal-item-bg-solid: #ffe0d3;
}

.theme-shanmiao,
.page-container.theme-shanmiao {
  --modal-bg-solid: #faf8f4;
  --modal-item-bg-solid: #e8f0ec;
}

/* Shared panel surfaces — follow app theme (tab picker uses solid modal vars below) */
.backup-panel,
.emoji-panel,
.calendar-detail-panel,
.calendar-jump-modal > div,
.cloud-login-prompt {
  background-color: var(--card-bg, #fff) !important;
  background-image: none !important;
  color: var(--text-main) !important;
  border: 1px solid var(--theme-line) !important;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--text-main) 12%, transparent) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Settings + board manager: must be a fully OPAQUE solid card so the planner,
 * tables and buttons behind never bleed through. No glass / translucency. */
.settings-panel,
.board-manager-panel {
  background: var(--modal-bg-solid, #fffaf4) !important;
  background-color: var(--modal-bg-solid, #fffaf4) !important;
  background-image: none !important;
  opacity: 1 !important;
  color: var(--modal-text-solid, var(--text-main, #211a16)) !important;
  border: 1px solid var(--theme-line, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--text-main) 16%, transparent) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate !important;
}

.settings-panel .settings-item,
.settings-panel .settings-language-item,
.settings-panel .settings-version-item,
.board-manager-panel .board-manager-item {
  background: var(--modal-item-bg-solid, #f1e6d8) !important;
  background-color: var(--modal-item-bg-solid, #f1e6d8) !important;
  background-image: none !important;
  opacity: 1 !important;
  color: var(--modal-text-solid, var(--text-main, #211a16)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.settings-panel .settings-icon {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* Modal scrim — solid enough without backdrop-filter on mobile */
.mask:not(.hidden):not(.is-closing),
.detail-overlay:not(.hidden):not(.is-closing),
.cloud-menu-mask:not(.hidden):not(.is-closing) {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--text-main) 55%, transparent) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.tab-picker-item.tab-picker-active,
.tab-picker-active {
  background: var(--primary) !important;
  color: var(--primary-text) !important;
}

.tab-picker-item.tab-picker-active .tab-picker-text b,
.tab-picker-item.tab-picker-active .tab-picker-text em,
.tab-picker-item.tab-picker-active .tab-picker-check,
.tab-picker-active b,
.tab-picker-active em,
.tab-picker-active .tab-picker-check {
  color: var(--primary-text) !important;
}

.backup-title,
.emoji-header,
.tab-picker-title,
.calendar-detail-title {
  color: var(--text-main) !important;
}

.backup-desc,
.calendar-detail-sub,
.calendar-detail-section-title {
  color: var(--text-sub) !important;
}

.backup-close {
  background: var(--tag-bg) !important;
  color: var(--text-main) !important;
}

.backup-desc,
.backup-code-box,
.restore-textarea {
  background: var(--tag-bg) !important;
  color: var(--text-sub) !important;
}

.backup-main-btn,
.restore-btn {
  background: var(--primary) !important;
  color: var(--primary-text) !important;
}

.backup-copy-btn,
.clear-data-btn {
  background: var(--card-bg) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--theme-line) !important;
}

.calendar-detail-item {
  background: var(--tag-bg) !important;
  color: var(--text-main) !important;
}

.calendar-detail-primary {
  background: var(--primary) !important;
  color: var(--primary-text) !important;
}

.calendar-detail-secondary {
  background: var(--card-bg) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--theme-line) !important;
}

.calendar-jump-modal {
  z-index: var(--z-modal) !important;
  background: color-mix(in srgb, var(--text-main) 42%, transparent) !important;
}

.calendar-jump-month {
  background: var(--tag-bg) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--theme-line) !important;
}

.calendar-jump-month.active {
  background: var(--primary) !important;
  color: var(--primary-text) !important;
}

.cloud-login-prompt-mask {
  z-index: var(--z-modal) !important;
  background: color-mix(in srgb, var(--text-main) 42%, transparent) !important;
}

.cloud-login-prompt b,
.cloud-login-prompt p {
  color: inherit !important;
}

.mask,
.detail-overlay {
  z-index: var(--z-mask) !important;
}

.toast-root {
  z-index: var(--z-toast) !important;
}

/* Course tools — theme variables */
.course-tool-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--theme-line) !important;
  color: var(--text-main) !important;
  box-shadow: 0 18px 46px color-mix(in srgb, var(--text-main) 8%, transparent) !important;
}

.course-tool-card span {
  background: var(--tag-bg) !important;
}

.course-tool-card b {
  color: var(--text-main) !important;
}

.course-tool-card em {
  color: var(--text-sub) !important;
}

.course-tree-shell {
  color: var(--text-main);
}

.course-tree-toolbar {
  background: var(--card-bg) !important;
  border: 1px solid var(--theme-line);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--text-main) 8%, transparent) !important;
}

.course-tree-zoom-controls {
  background: var(--tag-bg) !important;
  box-shadow: inset 0 0 0 1px var(--theme-line) !important;
}

.course-tree-zoom-controls button {
  background: var(--card-bg) !important;
  color: var(--text-main) !important;
}

.course-tree-zoom-controls button[data-course-tree-zoom-label] {
  background: var(--primary) !important;
  color: var(--primary-text) !important;
}

.course-tree-back,
.course-tree-reset,
.course-tree-fullscreen-btn,
.course-add-canvas-btn {
  color: var(--text-main);
}

.course-node-add-menu {
  z-index: var(--z-fullscreen) !important;
  background: var(--primary) !important;
  color: var(--primary-text) !important;
}

.course-tree-shell.course-tree-fullscreen {
  z-index: calc(var(--z-fullscreen) - 1) !important;
}

body.course-tree-fullscreen-open .course-tree-shell.course-tree-fullscreen {
  z-index: var(--z-fullscreen) !important;
}

/* Replace extreme z-index magic numbers */
.nav-drag-ghost {
  z-index: var(--z-debug) !important;
}

.nav-drop-line,
.tab-picker-panel .nav-drop-line {
  z-index: var(--z-debug) !important;
}

.course-node-edit-modal,
.course-tree-import-modal,
.course-line-confirm-modal {
  z-index: var(--z-modal) !important;
  background: color-mix(in srgb, var(--text-main) 42%, transparent) !important;
}

.course-node-edit-card,
.course-tree-import-card,
.course-line-confirm-card {
  background: var(--card-bg) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--theme-line) !important;
}

.ielts-translation-fullscreen {
  z-index: var(--z-fullscreen) !important;
}

/* Performance — list cards use solid surfaces instead of per-card blur */
.count-card,
.checklist-card,
.festival-card,
.subscription-card,
.accounting-card,
.grade-course-card,
.calendar-panel,
.schedule-container,
.timeline-card,
.subscription-summary-card,
.subscription-next-card,
.accounting-record,
.grade-course-card,
.course-tool-card,
.translation-library-card,
.translation-practice-card,
.goal-mobile-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.bg-orb {
  will-change: auto;
}

/* Mobile performance — reduce expensive effects */
@media (max-width: 899px) {
  .bg-orb {
    display: none !important;
  }

  .mask,
  .detail-overlay,
  .calendar-jump-modal,
  .cloud-login-prompt-mask,
  .keyline-travel-route .ktr-toolbar,
  .keyline-travel-route .ktr-panel,
  .keyline-travel-route .ktr-map-shell,
  .course-tree-toolbar,
  .dashboard-card,
  .count-card,
  .checklist-card,
  .festival-card,
  .subscription-card,
  .accounting-card,
  .grade-course-card,
  .calendar-panel,
  .schedule-container,
  .today-action-row,
  .tab-picker-panel,
  .backup-panel,
  .emoji-panel,
  .settings-panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .page-container,
  .main-view,
  .list-container,
  .content,
  .tab-panel {
    will-change: auto !important;
  }

  /* Keep list containers transparent — individual cards carry their own surface */
  .main-view,
  .module-view,
  .tab-page,
  .tab-panel,
  .content-panel,
  .content,
  .list-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .page-container::before,
  .page-container::after {
    display: none !important;
  }

  .list-container > *,
  .timeline-container > *,
  .tab-panel.active,
  .dashboard-card,
  .count-card,
  .checklist-card,
  .festival-card,
  .subscription-card {
    animation: none !important;
    transition: none !important;
  }

  .kd-item-enter,
  .kd-will-animate,
  .item-enter,
  .card-enter {
    animation: none !important;
    transition: none !important;
  }

  * {
    scroll-behavior: auto;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .page-container::before,
  .page-container::after,
  .card,
  .module-view,
  .tab-panel {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-orb {
    animation: none !important;
    filter: none !important;
    opacity: 0.35 !important;
  }

  .mask,
  .detail-overlay,
  .tab-picker-panel,
  .backup-panel,
  .emoji-panel,
  .settings-panel,
  .calendar-detail-panel,
  .cloud-login-prompt,
  .course-tree-toolbar,
  .keyline-travel-route .ktr-toolbar {
    backdrop-filter: none !important;
    transition: none !important;
  }
}

.share-restore-preview {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--tag-bg);
  border: 1px solid var(--theme-line);
}

.share-restore-preview ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.share-restore-preview li {
  margin: 4px 0;
  line-height: 1.45;
}

.share-restore-note {
  margin: 10px 0 0;
  font-size: 0.86rem;
  opacity: 0.78;
}

.share-restore-question {
  margin: 0 0 12px;
  font-weight: 600;
}

.share-restore-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.share-restore-mask .share-restore-panel {
  max-height: min(88vh, 720px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .share-restore-mask .share-restore-panel {
    width: min(96vw, 520px);
    max-height: 90vh;
  }
}

/* v2.0.1 hotfix: tab picker must be fully opaque — never use translucent --card-bg */
#tabPickerMask {
  background: rgba(20, 20, 20, 0.42) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#tabPickerMask:not(.hidden):not(.is-closing) .tab-picker-panel,
#tabPickerMask .tab-picker-panel.is-open,
.mask:not(.hidden) .tab-picker-panel,
.tab-picker-panel {
  background: var(--modal-bg-solid, #fffaf4) !important;
  background-color: var(--modal-bg-solid, #fffaf4) !important;
  background-image: none !important;
  opacity: 1 !important;
  color: var(--modal-text-solid, var(--text-main, #211a16)) !important;
  border: 1px solid var(--theme-line, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate !important;
}

#tabPickerMask .tab-picker-title,
.tab-picker-panel .tab-picker-title {
  color: var(--modal-text-solid, var(--text-main, #211a16)) !important;
}

#tabPickerMask .tab-picker-item,
.tab-picker-panel .tab-picker-item {
  background: var(--modal-item-bg-solid, #f1e6d8) !important;
  background-color: var(--modal-item-bg-solid, #f1e6d8) !important;
  background-image: none !important;
  opacity: 1 !important;
  color: var(--modal-text-solid, var(--text-main, #211a16)) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#tabPickerMask .tab-picker-item .tab-picker-text b,
.tab-picker-panel .tab-picker-item .tab-picker-text b {
  color: var(--modal-text-solid, var(--text-main, #211a16)) !important;
}

#tabPickerMask .tab-picker-item .tab-picker-text em,
.tab-picker-panel .tab-picker-item .tab-picker-text em {
  color: var(--modal-subtext-solid, var(--text-sub, #8d7664)) !important;
}

#tabPickerMask .tab-picker-item.tab-picker-active,
.tab-picker-panel .tab-picker-item.tab-picker-active {
  background: var(--primary, #7b5436) !important;
  background-color: var(--primary, #7b5436) !important;
  color: var(--primary-text, #fff) !important;
  opacity: 1 !important;
}

#tabPickerMask .tab-picker-item.tab-picker-active .tab-picker-text b,
#tabPickerMask .tab-picker-item.tab-picker-active .tab-picker-text em,
#tabPickerMask .tab-picker-item.tab-picker-active .tab-picker-check,
.tab-picker-panel .tab-picker-item.tab-picker-active .tab-picker-text b,
.tab-picker-panel .tab-picker-item.tab-picker-active .tab-picker-text em,
.tab-picker-panel .tab-picker-item.tab-picker-active .tab-picker-check {
  color: var(--primary-text, #fff) !important;
}

#tabPickerMask .tab-picker-icon,
.tab-picker-panel .tab-picker-icon {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#tabPickerMask .tab-picker-item.tab-picker-active .tab-picker-icon,
.tab-picker-panel .tab-picker-item.tab-picker-active .tab-picker-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  background-color: rgba(255, 255, 255, 0.22) !important;
}