/* Keyline Days — main soft-glass background image (loaded last)
 * Single layer on html; all app shells transparent. Export/admin excluded. */

:root {
  --kd-main-background-image: url("../assets/backgrounds/main-soft-glass-bg.png");
  --main-bg: #f8f9fb;
  --page-bg: #f8f9fb;
  --app-bg: #f8f9fb;
  --bg-start: #f8f9fb;
  --bg-mid: #f8f9fb;
  --bg-end: #f8f9fb;
}

html,
body,
#app,
.app,
.app-root,
.app-shell,
.page-container,
.main-view {
  min-height: 100%;
}

/* Single background layer on html — beats glass-premium / mono / ui-polish gradients */
html:has(#app:not(.visual-export-mode)) {
  background-color: #f8f9fb !important;
  background-image: var(--kd-main-background-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

html:has(#app:not(.visual-export-mode)) body,
html:has(#app:not(.visual-export-mode)) #app,
html:has(#app:not(.visual-export-mode)) #app.page-container,
html:has(#app:not(.visual-export-mode)) #app.theme-mono.page-container,
html:has(#app:not(.visual-export-mode)) .page-container,
html:has(#app:not(.visual-export-mode)) .page-container.theme-mono,
html.theme-mono:has(#app:not(.visual-export-mode)) body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Remove legacy fixed gradient overlays (ui-polish ::before/::after) */
html:has(#app:not(.visual-export-mode)) #app.page-container::before,
html:has(#app:not(.visual-export-mode)) #app.page-container::after,
html:has(#app:not(.visual-export-mode)) .page-container::before,
html:has(#app:not(.visual-export-mode)) .page-container::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
}

@media (max-width: 767px) {
  html:has(#app:not(.visual-export-mode)) {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

#app:not(.visual-export-mode) .main-view,
#app:not(.visual-export-mode) .content,
#app:not(.visual-export-mode) .content-wrapper,
#app:not(.visual-export-mode) .app-shell,
#app:not(.visual-export-mode) .app-root,
#app:not(.visual-export-mode) .desktop-sidebar,
#app:not(.visual-export-mode) .header,
#app:not(.visual-export-mode) .header-top,
#app:not(.visual-export-mode) .header-top.page-hero,
#app:not(.visual-export-mode) .tab-panel,
#app:not(.visual-export-mode) .list-container {
  background: transparent !important;
  background-image: none !important;
}

#app:not(.visual-export-mode) .bg-orb,
#app:not(.visual-export-mode) .orb,
#app:not(.visual-export-mode) .aurora,
#app:not(.visual-export-mode) .theme-orb,
#app:not(.visual-export-mode) .background-glow,
#app:not(.visual-export-mode) .page-glow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#mobileStatusBarBg {
  background-color: #f8f9fb !important;
}

/* Glass cards — slightly higher opacity for text on photo bg */
#app:not(.visual-export-mode) .card,
#app:not(.visual-export-mode) .panel,
#app:not(.visual-export-mode) .module-card,
#app:not(.visual-export-mode) .count-card,
#app:not(.visual-export-mode) .checklist-card,
#app:not(.visual-export-mode) .festival-card,
#app:not(.visual-export-mode) .subscription-card,
#app:not(.visual-export-mode) .grade-course-card,
#app:not(.visual-export-mode) .grade-table-card,
#app:not(.visual-export-mode) .teacher-review-row,
#app:not(.visual-export-mode) .teacher-review-card,
#app:not(.visual-export-mode) .schedule-container,
#app:not(.visual-export-mode) .overview-hero-panel,
#app:not(.visual-export-mode) .overview-action-card,
#app:not(.visual-export-mode) .overview-card,
#app:not(.visual-export-mode) .overview-checklist-card,
#app:not(.visual-export-mode) .overview-exchange-card,
#app:not(.visual-export-mode) .exchange-rate-card,
#app:not(.visual-export-mode) .settings-item,
#app:not(.visual-export-mode) .backup-card,
#app:not(.visual-export-mode) .tutorial-card,
#app:not(.visual-export-mode) .today-action-row {
  background: rgba(255, 255, 255, 0.72) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.82),
    rgba(255, 255, 255, 0.64)
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

#app:not(.visual-export-mode).hide-today-card[data-current-tab="academicYear"] .today-action-row {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#app:not(.visual-export-mode) .calendar-day-item.is-academic-holiday {
  background: rgba(34, 197, 94, 0.16) !important;
  border: 1px solid rgba(34, 197, 94, 0.34) !important;
  color: #15803d !important;
}

#app:not(.visual-export-mode) .academic-holiday-dot,
#app:not(.visual-export-mode) .calendar-panel .calendar-legend .calendar-dot.academic-holiday-dot {
  background: #22c55e !important;
}

#app:not(.visual-export-mode) .calendar-day.today .academic-holiday-dot {
  background: #ffffff !important;
}

#app:not(.visual-export-mode) .calendar-detail-academic-holiday {
  background: rgba(34, 197, 94, 0.13) !important;
  border: 1px solid rgba(34, 197, 94, 0.28) !important;
  color: #14532d !important;
}

#app:not(.visual-export-mode) .calendar-detail-academic-holiday .calendar-detail-icon,
#app:not(.visual-export-mode) .calendar-detail-academic-holiday .calendar-detail-badge {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #15803d !important;
}

/* Modals & tab picker */
#app:not(.visual-export-mode) .tab-picker-panel,
#app:not(.visual-export-mode) .settings-panel,
#app:not(.visual-export-mode) .backup-panel,
#app:not(.visual-export-mode) .board-manager-panel,
#app:not(.visual-export-mode) .emoji-panel,
#app:not(.visual-export-mode) .modal,
#app:not(.visual-export-mode) .dialog,
#app:not(.visual-export-mode) .sheet,
#app:not(.visual-export-mode) .form-panel,
#app:not(.visual-export-mode) .popup-panel,
#app:not(.visual-export-mode) .accounting-report-panel {
  background: rgba(255, 255, 255, 0.72) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.84),
    rgba(255, 255, 255, 0.66)
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.15) !important;
  backdrop-filter: blur(28px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.18) !important;
}

/* add-page: solid light surface — blur stays on main-view only, never tint the sheet. */
#app:not(.visual-export-mode) #addPage.add-page:not(.hidden) {
  background: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--text-main, #111) !important;
}

#app:not(.visual-export-mode) #addPage.add-page .cancel-text {
  color: var(--text-sub, #6b7280) !important;
}

#app:not(.visual-export-mode) .mask {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

#app:not(.visual-export-mode) .detail-overlay:not(.hidden),
#app:not(.visual-export-mode) .detail-overlay:not(.hidden):not(.is-closing) {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

#app:not(.visual-export-mode) .mask:not(.hidden),
#app:not(.visual-export-mode) .mask:not(.hidden):not(.is-closing),
#app:not(.visual-export-mode) .cloud-menu-mask:not(.hidden),
#app:not(.visual-export-mode) .cloud-menu-mask:not(.hidden):not(.is-closing) {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

/* Blur the live app surface whenever any modal locks scroll. */
#app:not(.visual-export-mode) > .main-view,
#app:not(.visual-export-mode) > .bg-orb {
  transition: filter 0.24s ease;
}

body.modal-scroll-locked #app:not(.visual-export-mode) > .main-view {
  filter: blur(12px) saturate(1.06);
  pointer-events: none;
}

body.modal-scroll-locked #app:not(.visual-export-mode) > .bg-orb {
  filter: blur(16px) saturate(1.04);
}

/* Modals appended directly on <body> still need their own blur layer. */
body > .mask:not(.hidden),
body > .mask:not(.hidden):not(.is-closing),
body > .course-node-edit-modal,
body > .kelan-helper-modal {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

/* Desktop sidebar — light glass, background visible around edges */
@media (min-width: 768px) {
  #app:not(.visual-export-mode) .desktop-sidebar {
    background: rgba(255, 255, 255, 0.58) !important;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.76),
      rgba(255, 255, 255, 0.5)
    ) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: 12px 0 38px rgba(15, 23, 42, 0.045) !important;
    backdrop-filter: blur(24px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
  }
}

/* ── Export: pure white only for legacy clean/share report export ── */
html:has(#app.visual-export-mode:not(.share-visual-export-app)),
html:has(#app.visual-export-mode:not(.share-visual-export-app)) body,
html:has(#app.visual-export-mode:not(.share-visual-export-app)) #app,
.clean-export-mode,
.share-export-mode {
  background: #ffffff !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

html:has(#app.visual-export-mode:not(.share-visual-export-app)) #app.page-container::before,
html:has(#app.visual-export-mode:not(.share-visual-export-app)) #app.page-container::after {
  display: none !important;
  content: none !important;
}

.clean-export-mode .bg-orb,
.share-export-mode .bg-orb,
.visual-export-mode:not(.share-visual-export-host) .bg-orb,
.visual-export-mode:not(.share-visual-export-host) .orb,
.visual-export-mode:not(.share-visual-export-host) .aurora,
.visual-export-mode:not(.share-visual-export-host) .theme-orb {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.clean-export-mode,
.clean-export-mode *,
.share-export-mode,
.share-export-mode * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Desktop header actions: share and settings use the same compact control ── */
@media (min-width: 900px) {
  #app:not(.visual-export-mode) .header-top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #app:not(.visual-export-mode) .header-top-actions .share-current-tab-btn,
  #app:not(.visual-export-mode) .header-top-actions .settings-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    align-self: center !important;
  }

  #app:not(.visual-export-mode) .header-top-actions .settings-btn-label {
    display: none !important;
  }

  #app:not(.visual-export-mode) .header-top-actions .settings-btn [data-kd-icon] {
    display: inline-flex !important;
  }
}

/* ── Mobile header: align with content gutter, no double padding ── */
@media (max-width: 767px) {
  #app:not(.visual-export-mode) .main-view {
    --kd-mobile-gutter: 16px;
    padding-left: var(--kd-mobile-gutter) !important;
    padding-right: var(--kd-mobile-gutter) !important;
  }

  #app:not(.visual-export-mode) .header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  #app:not(.visual-export-mode) .header-top.page-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    column-gap: 8px !important;
  }

  #app:not(.visual-export-mode) .header-title-block,
  #app:not(.visual-export-mode) .header-title-row {
    margin: 0 !important;
    padding: 0 !important;
  }

  #app:not(.visual-export-mode) .header-title-row .header-title {
    flex: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #app:not(.visual-export-mode) .header-subtitle {
    max-width: 100% !important;
  }

  #app:not(.visual-export-mode) .header-top-actions {
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
  }

  #app:not(.visual-export-mode) .content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── Mobile overview: 2-col cards match hero width ── */
@media (max-width: 767px) {
  #app:not(.visual-export-mode) .overview-dashboard-clean,
  #app:not(.visual-export-mode) #overviewRoot.overview {
    width: 100% !important;
    max-width: 100% !important;
  }

  #app:not(.visual-export-mode) .overview-hero-panel,
  #app:not(.visual-export-mode) .overview-grid-clean,
  #app:not(.visual-export-mode) .overview-grid,
  #app:not(.visual-export-mode) .overview-main-cards,
  #app:not(.visual-export-mode) .overview-exchange-wrap,
  #app:not(.visual-export-mode) .overview-exchange-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #app:not(.visual-export-mode) .overview-grid-clean,
  #app:not(.visual-export-mode) .overview-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
  }

  #app:not(.visual-export-mode) .overview-calendar-wrap {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #app:not(.visual-export-mode) .overview-main-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #app:not(.visual-export-mode) .overview-action-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* ── Mobile subscription: 2-col summary cards match list width ── */
@media (max-width: 767px) {
  #app:not(.visual-export-mode) #subscriptionList > .subscription-hero.stats-grid,
  #app:not(.visual-export-mode) #subscriptionList > .subscription-hero.summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
  }

  #app:not(.visual-export-mode) #subscriptionList > .subscription-hero .stat-card,
  #app:not(.visual-export-mode) #subscriptionList > .subscription-hero > .stat-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    padding: 13px !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(0, 0, 0, 0.045) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #app:not(.visual-export-mode) #subscriptionList > .subscription-hero .stat-card .value,
  #app:not(.visual-export-mode) #subscriptionList > .subscription-hero .stat-card > b {
    font-size: 22px !important;
    margin-top: 6px !important;
    letter-spacing: -0.03em !important;
  }

  #app:not(.visual-export-mode) #subscriptionList > .subscription-hero .stat-card .label,
  #app:not(.visual-export-mode) #subscriptionList > .subscription-hero .stat-card > span:first-child {
    font-size: 11px !important;
  }

  #app:not(.visual-export-mode) #subscriptionList > .subscription-hero .stat-card em {
    font-size: 10px !important;
    margin-top: 4px !important;
    line-height: 1.25 !important;
  }

  #app:not(.visual-export-mode) #subscriptionList > .currency-rate-note,
  #app:not(.visual-export-mode) #subscriptionList > .subscription-next-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Mobile tab picker: compact grid, centered icons, hide calendar ── */
@media (max-width: 767px) {
  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-item[data-tab="calendar"],
  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-item.hidden {
    display: none !important;
  }

  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-panel {
    gap: 8px !important;
    padding: 28px 14px 14px !important;
  }

  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-title {
    margin-bottom: 4px !important;
  }

  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-item {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 4px 10px !important;
    gap: 6px !important;
    border-radius: 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-item::after {
    display: none !important;
    content: none !important;
  }

  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
  }

  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-icon [data-kd-icon],
  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-icon .kd-line-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-icon .kd-line-icon-svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    margin: 0 auto !important;
  }

  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #app:not(.visual-export-mode) #tabPickerMask .tab-picker-text b {
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    width: 100% !important;
  }
}

/* ── Mobile: center all “add content” sheets in viewport ──
 * add-page had translate(-50%,-50%) without top:50%, which pushed the top
 * (e.g. subscription presets) above the screen. */
@media (max-width: 767px) {
  #app:not(.visual-export-mode) #addPage.add-page {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(calc(100vw - 24px), 520px) !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(
      88dvh,
      calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px)
    ) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    border-radius: 28px !important;
    padding: 0 16px !important;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    background: #ffffff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 850 !important;
  }

  #app:not(.visual-export-mode) #addPage.add-page .add-nav {
    padding-top: 14px !important;
    height: 56px !important;
    min-height: 56px !important;
  }

  #app:not(.visual-export-mode) #addPage.add-page .add-hero {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
  }

  #app:not(.visual-export-mode) #addPage.add-page .save-btn {
    margin-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  #app:not(.visual-export-mode) #addPage.add-page .form-card,
  #app:not(.visual-export-mode) #addPage.add-page .subscription-quick-presets {
    scroll-margin-top: 8px;
  }

  /* Detail / calendar pickers: center instead of sticking to top/bottom */
  #app:not(.visual-export-mode) .detail-overlay:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  }

  #app:not(.visual-export-mode) .detail-overlay .detail-card,
  #app:not(.visual-export-mode) .detail-overlay .calendar-detail-panel {
    width: min(calc(100vw - 24px), 520px) !important;
    max-height: min(
      86dvh,
      calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)
    ) !important;
    margin: 0 auto !important;
  }

  #app:not(.visual-export-mode) #calendarDetailMask.mask:not(.hidden),
  #app:not(.visual-export-mode) #settingsMask.mask:not(.hidden),
  #app:not(.visual-export-mode) #backupMask.mask:not(.hidden),
  #app:not(.visual-export-mode) #boardManagerMask.mask:not(.hidden),
  #app:not(.visual-export-mode) #emojiMask.mask:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  }

  #app:not(.visual-export-mode) #settingsMask .settings-panel,
  #app:not(.visual-export-mode) #backupMask .backup-panel,
  #app:not(.visual-export-mode) #boardManagerMask .board-manager-panel,
  #app:not(.visual-export-mode) #emojiMask .emoji-panel,
  #app:not(.visual-export-mode) #calendarDetailMask .calendar-detail-panel {
    width: min(calc(100vw - 24px), 520px) !important;
    max-height: min(
      86dvh,
      calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)
    ) !important;
    margin: 0 !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.2) !important;
  }
}