/* Desktop-only dashboard refinements. Phone UI is isolated in mobile.html. */
.desktop-phone-view-link { display: none !important; }
@media (min-width: 768px) {
  /* Keep theme-specific colors while restoring readable contrast for utility-class text. */
  body[data-theme] {
    background: var(--pilot-page) !important;
    color: var(--pilot-ink) !important;
  }
  body[data-theme] header {
    background: var(--pilot-card) !important;
    border-color: var(--pilot-line) !important;
    color: var(--pilot-ink) !important;
  }
  body[data-theme] .card-surface,
  body[data-theme] main > .desktop-home-kpis > div,
  body[data-theme] #tab-homework > div:has(#searchInput) {
    background: var(--pilot-card) !important;
    border-color: var(--pilot-line) !important;
    color: var(--pilot-ink) !important;
  }
  body[data-theme] :is([class*="text-slate-100"],[class*="text-slate-900"],[class*="text-slate-800"],[class*="text-slate-700"]) {
    color: var(--pilot-ink) !important;
  }
  body[data-theme] :is([class*="text-slate-600"],[class*="text-slate-500"],[class*="text-slate-400"],[class*="text-slate-300"]) {
    color: var(--pilot-muted) !important;
  }
  body[data-theme] :is(.field-control,#searchInput,#statusFilter,#sortFilter) {
    background: var(--pilot-card) !important;
    color: var(--pilot-ink) !important;
    border-color: var(--pilot-line) !important;
  }
  body[data-theme] .homework-task {
    color: var(--pilot-ink) !important;
    border-color: var(--pilot-line) !important;
  }
  body[data-theme="dark"] .homework-task.due-soon { background: #3a292b !important; border-color: #785052 !important; }
  body[data-theme="dark"] .homework-task.overdue { background: #48292a !important; border-color: #965052 !important; }
  body[data-theme="dark"] .homework-task.completed { background: #24392f !important; border-color: #476d58 !important; }
  body[data-theme] .accent-button { background: var(--pilot-accent) !important; color: var(--pilot-accent-ink) !important; border-color: var(--pilot-accent) !important; }
  body[data-theme] .soft-button { background: var(--pilot-soft) !important; color: var(--pilot-ink) !important; border-color: var(--pilot-line) !important; }
  body[data-theme] .desktop-phone-view-link { display: inline-flex !important; align-items: center; text-decoration: none; }

  /* Desktop starts at the working pages; the home summary remains available on phones. */
  main > .desktop-home-kpis,
  main > .desktop-home-summary,
  main > #dailyBriefCard { display: none !important; }
  main > .desktop-home-kpis,
  main > .desktop-home-summary,
  main > #dailyBriefCard { margin: 0 !important; }
  #desktopClock,
  #avatarInitial { display: none !important; }

  /* Tabs use a quiet underline only, never a filled selected state. */
  .desktop-page-tabs {
    display: flex !important;
    align-items: center;
    gap: 28px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pilot-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body[data-theme] .desktop-page-tabs .tab-button,
  body[data-theme] .desktop-page-tabs .tab-button[aria-current="page"],
  body[data-theme] .desktop-page-tabs .tab-button[class*="border-blue-500"] {
    position: relative;
    min-height: 48px;
    padding: 10px 2px 8px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pilot-muted) !important;
    font-size: 14px !important;
    font-weight: 550 !important;
  }
  body[data-theme] .desktop-page-tabs .tab-button:hover { background: transparent !important; color: var(--pilot-accent) !important; }
  body[data-theme] .desktop-page-tabs .tab-button[aria-current="page"],
  body[data-theme] .desktop-page-tabs .tab-button[class*="border-blue-500"] {
    border-bottom-color: var(--pilot-accent) !important;
    color: var(--pilot-accent) !important;
    font-weight: 700 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-theme] .desktop-page-tabs .tab-button[aria-current="page"] svg { color: var(--pilot-accent) !important; }
  body[data-theme] .desktop-page-tabs .tab-button:focus-visible { outline: 2px solid var(--pilot-accent) !important; outline-offset: 2px; }

  /* Rows open the existing task detail modal directly. */
  #homeworkList > .homework-task { cursor: pointer; }
  #homeworkList > .homework-task:hover { background: color-mix(in srgb, var(--pilot-card) 90%, var(--pilot-soft)) !important; }
  #homeworkList .homework-description,
  #homeworkList .homework-detail-meta { display: none !important; }
  #homeworkList > .homework-task > .homework-complete-button { grid-column: 2; }
}
@media (min-width: 768px) {
  body[data-theme] #homeworkList { background: var(--pilot-card) !important; border-color: var(--pilot-line) !important; }
  body[data-theme] #homeworkList > .homework-task { background: var(--pilot-card) !important; border-color: var(--pilot-line) !important; color: var(--pilot-ink) !important; }
  body[data-theme]:not([data-theme="dark"]) #homeworkList > .homework-task.due-soon { background: color-mix(in srgb,var(--pilot-card) 86%,#f7d8d5) !important; }
  body[data-theme]:not([data-theme="dark"]) #homeworkList > .homework-task.overdue { background: color-mix(in srgb,var(--pilot-card) 80%,#f1c5c2) !important; }
  body[data-theme]:not([data-theme="dark"]) #homeworkList > .homework-task.completed { background: color-mix(in srgb,var(--pilot-card) 88%,#d9eedf) !important; }
  body[data-theme="dark"] #homeworkList > .homework-task.due-soon { background: #3a292b !important; border-color: #785052 !important; }
  body[data-theme="dark"] #homeworkList > .homework-task.overdue { background: #48292a !important; border-color: #965052 !important; }
  body[data-theme="dark"] #homeworkList > .homework-task.completed { background: #24392f !important; border-color: #476d58 !important; }
  body[data-theme] #homeworkList .homework-task .task-state { background: var(--pilot-soft) !important; border-color: var(--pilot-line) !important; color: var(--pilot-ink) !important; }
  body[data-theme] #homeworkList .homework-task .homework-complete-button { color: var(--pilot-ink) !important; }
  body[data-theme] .calendar-day.selected { background: var(--pilot-accent) !important; border-color: var(--pilot-accent) !important; color: var(--pilot-accent-ink) !important; }
}

.task-detail-loading{display:inline-flex;align-items:center;gap:9px;color:var(--pilot-muted)}
.task-detail-spinner{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:taskDetailSpin .75s linear infinite;flex:0 0 auto}
@keyframes taskDetailSpin{to{transform:rotate(360deg)}}
#taskDetailModal[aria-busy="true"] #taskDetailComplete{opacity:.6;cursor:wait}

/* Bottom-centred sync toast, positioned independently of legacy utility transforms. */
#toast { position: fixed !important; z-index: 80 !important; left: 50% !important; right: auto !important; bottom: 28px !important; top: auto !important; width: max-content; max-width: calc(100vw - 32px); opacity: 0; visibility: hidden; transform: translate(-50%, 18px) !important; transition: opacity .22s ease, transform .22s ease, visibility .22s ease; pointer-events: none; }
#toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0) !important; }
#toast > div { max-width: 100%; border-radius: 14px !important; padding: 11px 16px !important; background: #263a3d !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 24px rgba(20,35,32,.2) !important; }
#toastMessage { overflow-wrap: anywhere; }
@media (max-width: 767px) { #toast { bottom: calc(78px + env(safe-area-inset-bottom)) !important; } }

#toast.sync-toast { width: min(460px, calc(100vw - 32px)); }
#toast.sync-toast > div { justify-content: center; min-height: 58px; border-radius: 14px !important; padding: 12px 22px !important; background: #263a3d !important; color: #f5f7f6 !important; box-shadow: none !important; }
#toast.sync-toast #toastIcon { display: none; }
#toast.sync-toast #toastMessage { display: block; width: 100%; white-space: pre-line; text-align: center; line-height: 1.5; font-size: 15px; font-weight: 450; }

/* Force a distinct cache key and match the phone sync confirmation shape. */
#toast.sync-toast { bottom: 28px !important; }