/* =========================================================
   1. Global defaults and reusable components
   ========================================================= */

:root {
  font-family: Inter, system-ui, sans-serif;
  color: #17202a;
  background: #f4f7fb;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 5%;
  background: #fff;
  border-bottom: 1px solid #dfe6ee;
}
.brand {
  font-weight: 800;
  font-size: 1.2rem;
  color: #17202a;
  text-decoration: none;
}
.topbar nav {
  display: flex;
  gap: 18px;
}
.topbar nav a,
.panel a {
  color: #3659d9;
  text-decoration: none;
}
.container {
  max-width: 1180px;
  margin: auto;
  padding: 34px 22px;
}
.message {
  padding: 12px 16px;
  background: #e6f7ec;
  border-radius: 10px;
  margin-bottom: 18px;
}
.hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  background: linear-gradient(120deg, #17202a, #384b66);
  color: white;
  border-radius: 22px;
  padding: 34px;
}
.hero h1 {
  font-size: 2.2rem;
  margin: 0.2rem 0;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
}
.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.button {
  display: inline-block;
  border: 0;
  border-radius: 10px;
  background: #3659d9;
  color: #fff;
  padding: 11px 16px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}
.button.secondary {
  background: #fff;
  color: #17202a;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.stats article,
.panel,
.form-card {
  background: white;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  padding: 20px;
}
.stats strong {
  display: block;
  font-size: 1.8rem;
}
.stats span {
  color: #6d7785;
}
.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}
.panel {
  margin-bottom: 18px;
}
.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-heading span {
  color: #6d7785;
  font-size: 0.85rem;
}
.task {
  display: flex;
  gap: 14px;
  border-left: 5px solid #9aa5b1;
  padding: 15px;
  margin: 12px 0;
  background: #f9fbfd;
  border-radius: 10px;
}
.urgency-5 {
  border-color: #c0392b;
}
.urgency-4 {
  border-color: #e67e22;
}
.urgency-3 {
  border-color: #d4ac0d;
}
.urgency-2 {
  border-color: #2980b9;
}
.urgency-1 {
  border-color: #27ae60;
}
.check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #bac3cf;
  background: #fff;
  cursor: pointer;
}
.task-body {
  flex: 1;
}
.task-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.task p {
  margin: 6px 0 0;
}
  /* =========================================================
   7. Weekly planner
   ========================================================= */

/* Previous, current, and next week buttons */
.week-navigation {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

/* Seven-day calendar layout */
.week-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Remove the normal panel margin inside the calendar grid */
.week-day {
  min-width: 0;
  margin-bottom: 0;
}

/* Highlight the current day */
.week-day.today {
  border: 2px solid #3659d9;
  box-shadow: 0 8px 24px rgb(54 89 217 / 12%);
}

/* Give today's heading a blue accent */
.week-day.today .eyebrow {
  color: #3659d9;
  font-weight: 800;
}

/* Keep long task names inside their cards */
.week-day .task-title {
  min-width: 0;
  flex-wrap: wrap;
}

.week-day .task-title strong {
  overflow-wrap: anywhere;
}

/* Make weekly task cards slightly more compact */
.week-day .task {
  padding: 13px;
}

.week-day .empty {
  padding: 20px 10px;
}

/* Weekly goal target date */
.goal small {
  display: block;
  margin-top: 6px;
  color: #6d7785;
}

/* Weekly planner dark mode */
html[data-theme="dark"] .week-day.today {
  border-color: #6687ff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
}

html[data-theme="dark"] .week-day.today .eyebrow {
  color: #8da8ff;
}

html[data-theme="dark"] .goal small {
  color: #aab6c7;
}

/* Use one calendar column on smaller screens */
@media (max-width: 1050px) {
  .week-grid {
    grid-template-columns: 1fr;
  }
}

/* Stack navigation buttons on phones */
@media (max-width: 600px) {
  .week-navigation {
    flex-direction: column;
  }

  .week-navigation .button {
    width: 100%;
    text-align: center;
  }

  .week-day {
    padding: 16px;
  }
}

.task small {
  color: #6d7785;
}
.badge {
  font-size: 0.75rem;
  background: #e9eefb;
  padding: 4px 8px;
  border-radius: 999px;
}
.goal {
  margin: 14px 0;
}
.goal div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.goal progress {
  width: 100%;
  height: 10px;
}
.empty {
  text-align: center;
  padding: 30px;
  color: #6d7785;
}
.form-card {
  max-width: 720px;
  margin: auto;
}
.form-card label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}
.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
.cancel {
  margin-left: 12px;
  color: #6d7785;
  text-decoration: none;
}
@media (max-width: 800px) {
  .hero,
  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .topbar {
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
  }
}

/* =========================================================
   2. Shared page layout, navigation, and theme controls
   ========================================================= */

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  flex: 1;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
  box-shadow: 0 3px 18px rgb(23 32 42 / 7%);
}

.topbar-inner {
  width: 100%;
  max-width: 1180px;
  margin: auto;
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #3659d9;
  color: white;
  font-weight: 800;
}

.brand small {
  display: block;
  margin-top: 2px;
  color: #6d7785;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.navigation {
  display: flex;
  align-items: center;
  gap: 18px;
}

.navigation a {
  color: #354052;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
}

.navigation a:hover,
.navigation a:focus-visible {
  color: #3659d9;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: #f4f7fb;
  color: #17202a;
  cursor: pointer;
  font-size: 1.1rem;
}

.theme-toggle:hover {
  border-color: #3659d9;
}

.site-footer {
  padding: 22px;
  text-align: center;
  color: #6d7785;
  font-size: 0.82rem;
}

:focus-visible {
  outline: 3px solid rgb(54 89 217 / 35%);
  outline-offset: 3px;
}

/* Shared dark theme colors */

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  color: #e8edf5;
  background: #101722;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .stats article,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .form-card {
  color: #e8edf5;
  background: #182231;
  border-color: #2b394b;
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .navigation a {
  color: #e8edf5;
}

html[data-theme="dark"] .brand small,
html[data-theme="dark"] .stats span,
html[data-theme="dark"] .panel-heading span,
html[data-theme="dark"] .task p,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .site-footer {
  color: #aab6c7;
}

html[data-theme="dark"] .task {
  background: #202c3c;
}

html[data-theme="dark"] .badge {
  color: #dce5ff;
  background: #2d416b;
}

html[data-theme="dark"] .check,
html[data-theme="dark"] .theme-toggle {
  color: #e8edf5;
  background: #202c3c;
  border-color: #405069;
}

html[data-theme="dark"] .form-card input,
html[data-theme="dark"] .form-card select,
html[data-theme="dark"] .form-card textarea {
  color: #e8edf5;
  background: #101722;
  border-color: #405069;
}

@media (max-width: 800px) {
  .topbar-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .navigation {
    width: 100%;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .navigation a {
    white-space: nowrap;
  }

  .theme-toggle {
    flex: 0 0 38px;
    margin-left: auto;
  }
}

/* =========================================================
   3. Dashboard details and progress components
   ========================================================= */

.hero p:last-child {
  margin-bottom: 0;
  color: #d9e1ec;
}

.panel h2,
.daily-progress h2 {
  margin-top: 4px;
}

.daily-progress {
  margin-bottom: 18px;
}

.progress-heading,
.wellness-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.daily-progress progress {
  width: 100%;
  height: 14px;
  margin-top: 12px;
  accent-color: #3659d9;
}

.task-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  color: #6d7785;
  font-size: 0.82rem;
}

.urgency-label {
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 800;
}

.urgency-label-5 {
  color: #9f2419;
  background: #fde4e1;
}

.urgency-label-4 {
  color: #a84d00;
  background: #ffead7;
}

.urgency-label-3 {
  color: #796000;
  background: #fff3bd;
}

.urgency-label-2 {
  color: #176497;
  background: #dceffc;
}

.urgency-label-1 {
  color: #176b3a;
  background: #dcf5e6;
}

.wellness-row {
  padding: 10px 0;
  border-bottom: 1px solid #e1e7ef;
}

.upcoming-task {
  padding: 11px 0;
  border-bottom: 1px solid #e1e7ef;
}

.upcoming-task strong,
.upcoming-task small {
  display: block;
}

.upcoming-task small {
  margin-top: 4px;
  color: #6d7785;
}

.overdue-panel {
  border-left: 5px solid #c0392b;
}

html[data-theme="dark"] .task-details,
html[data-theme="dark"] .upcoming-task small {
  color: #aab6c7;
}

html[data-theme="dark"] .wellness-row,
html[data-theme="dark"] .upcoming-task {
  border-color: #2b394b;
}

@media (max-width: 600px) {
  .progress-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-title {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* =========================================================
   4. Task and check-in forms
   ========================================================= */

.form-page {
  max-width: 880px;
  margin: auto;
}

.form-heading {
  max-width: 680px;
  margin-bottom: 24px;
}

.form-heading h1 {
  margin: 6px 0 10px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.form-heading > p:last-child {
  color: #6d7785;
  line-height: 1.6;
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  color: #3659d9;
  text-decoration: none;
  font-weight: 700;
}

.form-card {
  max-width: none;
  margin: 0;
  padding: 28px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.form-field {
  min-width: 0;
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.optional {
  color: #7b8796;
  font-size: 0.72rem;
  font-weight: 500;
}

.form-card input,
.form-card select,
.form-card textarea {
  margin-top: 7px;
  font: inherit;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.form-card textarea {
  resize: vertical;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: #3659d9;
  outline: none;
  box-shadow: 0 0 0 3px rgb(54 89 217 / 14%);
}

.help-text,
.field-error {
  display: block;
  margin-top: 7px;
  line-height: 1.4;
}

.help-text {
  color: #6d7785;
}

.field-error {
  color: #b42318;
  font-weight: 700;
}

.form-alert {
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid #f3aaa4;
  border-radius: 10px;
  color: #8f1d14;
  background: #fff0ef;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #e1e7ef;
}

.button-muted {
  color: #354052;
  background: #e9eef5;
}

html[data-theme="dark"] .form-heading > p:last-child,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] .optional {
  color: #aab6c7;
}

html[data-theme="dark"] .form-actions {
  border-color: #2b394b;
}

html[data-theme="dark"] .button-muted {
  color: #e8edf5;
  background: #2b394b;
}

@media (max-width: 650px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field-wide {
    grid-column: auto;
  }

  .form-card {
    padding: 20px;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .button {
    width: 100%;
    text-align: center;
  }
}
/* =========================================================
   5. Mobile navigation, interaction effects, and polish
   ========================================================= */

.topbar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  color: #17202a;
  background: #f4f7fb;
  cursor: pointer;
  font-size: 1.2rem;
}

.stats article,
.panel,
.form-card,
.task {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.stats article:hover,
.panel:hover {
  border-color: #c5d0e0;
  box-shadow: 0 8px 24px rgb(23 32 42 / 7%);
}

.task:hover {
  transform: translateX(3px);
}

.button {
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgb(54 89 217 / 20%);
}

.message {
  border-left: 4px solid #27ae60;
  animation: message-arrival 250ms ease-out;
}

@keyframes message-arrival {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html[data-theme="dark"] .menu-toggle {
  color: #e8edf5;
  background: #202c3c;
  border-color: #405069;
}

html[data-theme="dark"] .stats article:hover,
html[data-theme="dark"] .panel:hover {
  border-color: #405069;
  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
}

@media (max-width: 800px) {
  .topbar-inner {
    display: block;
    padding: 12px 18px;
  }

  .topbar-heading {
    width: 100%;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
  }

  .navigation {
    display: none;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    border-top: 1px solid #dfe6ee;
  }

  .navigation.is-open {
    display: flex;
  }

  .navigation a {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
  }

  .navigation a:hover,
  .navigation a:focus-visible {
    background: #edf1ff;
  }

  .theme-toggle {
    width: 100%;
    margin: 5px 0 0;
  }

  html[data-theme="dark"] .navigation {
    border-color: #2b394b;
  }

  html[data-theme="dark"] .navigation a:hover,
  html[data-theme="dark"] .navigation a:focus-visible {
    background: #202c3c;
  }

  .container {
    padding: 24px 16px;
  }

  .hero {
    padding: 26px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   6. Login, signup, and other authentication pages
   ========================================================= */

.auth-container {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding: 2rem 1rem;
}

.auth-card {
  width: min(100%, 520px);
  padding: 2rem;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #dbe2ea);
  border-radius: 1rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.auth-card h1 {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.auth-card form p {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.auth-card input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 0.65rem;
  background: var(--surface, #ffffff);
  color: var(--text, #172033);
}

.auth-card .helptext {
  color: var(--muted, #64748b);
  font-size: 0.85rem;
}

.auth-card ul.errorlist,
.form-errors {
  color: #b42318;
}

.auth-switch {
  margin-top: 1.25rem;
  text-align: center;
}
/* Authentication dark mode — matches the dashboard palette */

html[data-theme="dark"] .auth-card {
  color: #e8edf5;
  background: #182231;
  border-color: #2b394b;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .auth-card input {
  color: #e8edf5;
  background: #101722;
  border-color: #405069;
}

html[data-theme="dark"] .auth-card input:focus {
  border-color: #6687ff;
  outline: none;
  box-shadow: 0 0 0 3px rgb(102 135 255 / 22%);
}

html[data-theme="dark"] .auth-card label {
  color: #e8edf5;
}

html[data-theme="dark"] .auth-card .helptext {
  color: #aab6c7;
}

html[data-theme="dark"] .auth-card a {
  color: #8da6ff;
}

html[data-theme="dark"] .auth-card ul.errorlist,
html[data-theme="dark"] .form-errors {
  color: #fca5a5;
}
/* =========================================================
   4. Authentication controls and dark-mode corrections
   ========================================================= */

.nav-form {
  margin: 0;
}

.nav-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #354052;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.nav-link-button:hover,
.nav-link-button:focus-visible {
  color: #3659d9;
}

.muted,
.helptext {
  color: #6d7785;
}

.errorlist {
  margin: 6px 0;
  padding-left: 20px;
  color: #b42318;
}

.auth-container {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.auth-card {
  width: 100%;
  max-width: 620px;
  padding: 28px;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  background: #fff;
}

.app-form p {
  margin: 18px 0;
}

.app-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.app-form input,
.app-form select,
.app-form textarea {
  width: 100%;
  padding: 11px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #17202a;
}

.auth-switch {
  margin-top: 20px;
}

/* Dark-mode corrections */

html[data-theme="dark"] .auth-card {
  color: #e8edf5;
  background: #182231;
  border-color: #2b394b;
}

html[data-theme="dark"] .nav-link-button {
  color: #e8edf5;
}

html[data-theme="dark"] .nav-link-button:hover,
html[data-theme="dark"] .nav-link-button:focus-visible,
html[data-theme="dark"] .panel a,
html[data-theme="dark"] .auth-card a {
  color: #8da8ff;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .helptext,
html[data-theme="dark"] .task-details,
html[data-theme="dark"] .cancel {
  color: #aab6c7;
}

html[data-theme="dark"] .app-form input,
html[data-theme="dark"] .app-form select,
html[data-theme="dark"] .app-form textarea {
  color: #e8edf5;
  background: #101722;
  border-color: #405069;
}

html[data-theme="dark"] .app-form input::placeholder,
html[data-theme="dark"] .app-form textarea::placeholder {
  color: #8290a3;
}

html[data-theme="dark"] .errorlist {
  color: #ff9b92;
}

html[data-theme="dark"] .urgency-label-5 {
  color: #ffb4ad;
  background: #57201c;
}

html[data-theme="dark"] .urgency-label-4 {
  color: #ffc18c;
  background: #573018;
}

html[data-theme="dark"] .urgency-label-3 {
  color: #ffe183;
  background: #4e4217;
}

html[data-theme="dark"] .urgency-label-2 {
  color: #9ed7ff;
  background: #183d57;
}

html[data-theme="dark"] .urgency-label-1 {
  color: #9de7bb;
  background: #193f2b;
}
/* =========================================================
   7. Weekly planner
   ========================================================= */

/* Previous, current, and next week buttons */
.week-navigation {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

/* Seven-day calendar layout */
.week-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Remove the normal panel margin inside the calendar grid */
.week-day {
  min-width: 0;
  margin-bottom: 0;
}

/* Highlight the current day */
.week-day.today {
  border: 2px solid #3659d9;
  box-shadow: 0 8px 24px rgb(54 89 217 / 12%);
}

/* Give today's heading a blue accent */
.week-day.today .eyebrow {
  color: #3659d9;
  font-weight: 800;
}

/* Keep long task names inside their cards */
.week-day .task-title {
  min-width: 0;
  flex-wrap: wrap;
}

.week-day .task-title strong {
  overflow-wrap: anywhere;
}

/* Make weekly task cards slightly more compact */
.week-day .task {
  padding: 13px;
}

.week-day .empty {
  padding: 20px 10px;
}

/* Weekly goal target date */
.goal small {
  display: block;
  margin-top: 6px;
  color: #6d7785;
}

/* Weekly planner dark mode */
html[data-theme="dark"] .week-day.today {
  border-color: #6687ff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
}

html[data-theme="dark"] .week-day.today .eyebrow {
  color: #8da8ff;
}

html[data-theme="dark"] .goal small {
  color: #aab6c7;
}

/* Use one calendar column on smaller screens */
@media (max-width: 1050px) {
  .week-grid {
    grid-template-columns: 1fr;
  }
}

/* Stack navigation buttons on phones */
@media (max-width: 600px) {
  .week-navigation {
    flex-direction: column;
  }

  .week-navigation .button {
    width: 100%;
    text-align: center;
  }

  .week-day {
    padding: 16px;
  }
}

/* =========================================================
   8. Paper-style monthly planner
   ========================================================= */

.planner-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
}

.planner-month-header h1 {
  margin: 4px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.planner-month-header p:last-child {
  margin: 0;
  color: #6d7785;
}

.month-navigation {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.month-navigation .secondary {
  border: 1px solid #d6dee8;
}

.paper-planner {
  padding: 22px;
  border: 1px solid #d8d1c5;
  border-radius: 6px;
  background: #fffdf8;
  box-shadow: 0 15px 40px rgb(80 67 47 / 10%);
}

.planner-calendar-shell {
  width: 100%;
  overflow-x: auto;
}

.planner-calendar {
  min-width: 980px;
  display: grid;
  grid-template-columns: repeat(7, minmax(135px, 1fr));
  border-top: 1px solid #b8b1a6;
  border-left: 1px solid #b8b1a6;
}

.planner-weekday {
  padding: 12px 8px;
  border-right: 1px solid #b8b1a6;
  border-bottom: 1px solid #b8b1a6;
  background: #f1eee7;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.planner-day {
  min-height: 180px;
  padding: 10px;
  border-right: 1px solid #b8b1a6;
  border-bottom: 1px solid #b8b1a6;
  background: #fffdf8;
}

.planner-day.outside-month {
  color: #9a958d;
  background: #f7f4ed;
}

.planner-day.is-today {
  position: relative;
  background: #eef2ff;
  box-shadow: inset 0 0 0 2px #3659d9;
}

.planner-day-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.planner-day-heading time {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.planner-day.is-today .planner-day-heading time {
  color: #fff;
  background: #3659d9;
}

.planner-day-heading span {
  color: #6d7785;
  font-size: 0.72rem;
}

.planner-day-lines {
  display: grid;
  gap: 7px;
}

.writing-line,
.note-lines span {
  display: block;
  min-height: 23px;
  border-bottom: 1px solid #ddd6ca;
}

.planner-entry {
  display: flex;
  gap: 6px;
  min-width: 0;
  padding: 5px 4px;
  border-left: 3px solid #9aa5b1;
  border-radius: 3px;
  background: rgb(255 255 255 / 70%);
  font-size: 0.78rem;
}

.planner-entry-check {
  flex: 0 0 auto;
  font-weight: 700;
}

.planner-entry div {
  min-width: 0;
}

.planner-entry strong,
.planner-entry small {
  display: block;
}

.planner-entry strong {
  overflow-wrap: anywhere;
}

.planner-entry small {
  margin-top: 2px;
  color: #6d7785;
}

.planner-entry.completed {
  opacity: 0.58;
  text-decoration: line-through;
}

.planner-bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.planner-notes,
.planner-goals {
  min-height: 220px;
  padding: 22px;
  border: 1px solid #d8d1c5;
  background: #fffdf8;
}

.planner-notes h2,
.planner-goals h2 {
  margin-top: 4px;
  font-family: Georgia, "Times New Roman", serif;
}

.note-lines {
  display: grid;
  gap: 9px;
}

.planner-goal {
  margin: 16px 0;
}

.planner-goal > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.planner-goal progress {
  width: 100%;
  height: 10px;
  accent-color: #3659d9;
}

.planner-goal small {
  color: #6d7785;
}

/* Monthly planner dark mode */

html[data-theme="dark"] .planner-month-header p:last-child,
html[data-theme="dark"] .planner-day-heading span,
html[data-theme="dark"] .planner-entry small,
html[data-theme="dark"] .planner-goal small {
  color: #aab6c7;
}

html[data-theme="dark"] .paper-planner,
html[data-theme="dark"] .planner-day,
html[data-theme="dark"] .planner-notes,
html[data-theme="dark"] .planner-goals {
  color: #e8edf5;
  background: #182231;
  border-color: #405069;
}

html[data-theme="dark"] .planner-weekday,
html[data-theme="dark"] .planner-day.outside-month {
  color: #aab6c7;
  background: #111a27;
}

html[data-theme="dark"] .planner-calendar,
html[data-theme="dark"] .planner-weekday,
html[data-theme="dark"] .planner-day {
  border-color: #405069;
}

html[data-theme="dark"] .planner-day.is-today {
  background: #202f53;
  box-shadow: inset 0 0 0 2px #8da8ff;
}

html[data-theme="dark"] .planner-entry {
  background: rgb(32 44 60 / 75%);
}

html[data-theme="dark"] .writing-line,
html[data-theme="dark"] .note-lines span {
  border-color: #405069;
}

/* Tablet and phone layout */

@media (max-width: 800px) {
  .planner-month-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .month-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .month-navigation .button {
    text-align: center;
  }

  .month-navigation .button:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .paper-planner {
    padding: 12px;
  }

  .planner-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .month-navigation {
    grid-template-columns: 1fr;
  }

  .month-navigation .button:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
  }
}
/* Editable monthly notes */

.monthly-notes-form {
  display: grid;
  gap: 14px;
}

.monthly-notes-form .field {
  display: grid;
  gap: 8px;
}

.monthly-notes-form label {
  font-weight: 700;
}

.monthly-notes-form textarea {
  width: 100%;
  min-height: 190px;
  padding: 14px;
  resize: vertical;
  border: 0;
  border-radius: 4px;
  color: #263142;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 29px,
    #ddd6ca 30px
  );
  font: inherit;
  line-height: 30px;
}

.monthly-notes-form textarea:focus {
  outline: 2px solid #3659d9;
  outline-offset: 3px;
}

.monthly-notes-form .button {
  justify-self: start;
}

html[data-theme="dark"] .monthly-notes-form textarea {
  color: #e8edf5;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 29px,
    #405069 30px
  );
}

html[data-theme="dark"] .monthly-notes-form textarea:focus {
  outline-color: #8da8ff;
}
/* =========================================================
   9. Yearly planner
   ========================================================= */

/* Page heading */

.planner-year-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
}

.planner-year-header h1 {
  margin: 4px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.planner-year-header p:last-child {
  max-width: 680px;
  margin: 0;
  color: #6d7785;
  line-height: 1.6;
}

/* Previous, current, and next year navigation */

.year-navigation {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.button-secondary,
.button.secondary {
  color: #354052;
  background: #ffffff;
  border: 1px solid #d6dee8;
}

/* Year summary */

.year-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.summary-card {
  padding: 22px;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  background: #ffffff;
}

.summary-card strong {
  display: block;
  margin-top: 6px;
  font-size: 2rem;
}

.summary-label {
  color: #6d7785;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Shared progress bars */

.progress-track {
  width: 100%;
  height: 10px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ecf3;
}

.progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3659d9, #6687ff);
}

/* Section headings */

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 4px 0 0;
}

/* Yearly goals */

.year-goals-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(240px, 1fr)
  );
  gap: 16px;
}

.goal-card {
  padding: 18px;
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  background: #f9fbfd;
}

.goal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.goal-card-header h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

.goal-card p {
  margin: 12px 0 0;
  color: #6d7785;
  font-size: 0.85rem;
}

/* Twelve-month calendar */

.year-calendar-grid {
  display: grid;
  grid-template-columns: repeat(
    3,
    minmax(0, 1fr)
  );
  gap: 18px;
}

.year-month-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid #d8d1c5;
  border-radius: 10px;
  background: #fffdf8;
  box-shadow: 0 7px 20px rgb(80 67 47 / 7%);
}

.year-month-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.year-month-header h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.year-month-header h3 a {
  color: #17202a;
}

.year-month-header p {
  margin: 4px 0 0;
  color: #6d7785;
  font-size: 0.75rem;
}

.month-progress {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: #2947b7;
  background: #e9eefb;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Mini calendar grid */

.mini-calendar-weekdays,
.mini-calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.mini-calendar-weekdays {
  margin-bottom: 5px;
  color: #6d7785;
  font-size: 0.65rem;
  font-weight: 800;
  text-align: center;
}

.mini-calendar-week {
  margin-bottom: 4px;
}

.mini-calendar-day {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 35px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #354052;
  background: #f7f4ed;
  text-decoration: none;
  font-size: 0.76rem;
}

.mini-calendar-day:hover,
.mini-calendar-day:focus-visible {
  border-color: #3659d9;
  color: #2947b7;
  background: #eef2ff;
}

.mini-calendar-day.is-today {
  border-color: #3659d9;
  color: #ffffff;
  background: #3659d9;
  font-weight: 800;
}

.mini-calendar-day.has-tasks:not(.is-today) {
  color: #2947b7;
  background: #e9eefb;
  font-weight: 800;
}

.mini-calendar-day small {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 0.52rem;
}

.mini-calendar-day.is-outside-month {
  visibility: hidden;
}

/* Important deadlines */

.important-task-list {
  display: grid;
  gap: 12px;
}

.important-task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px;
  border: 1px solid #e1e7ef;
  border-left: 5px solid #e67e22;
  border-radius: 10px;
  background: #f9fbfd;
}

.important-task h3 {
  margin: 8px 0 0;
}

.important-task p {
  margin: 6px 0 0;
  color: #6d7785;
}

.urgency-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.urgency-badge.urgency-5 {
  color: #9f2419;
  background: #fde4e1;
}

.urgency-badge.urgency-4 {
  color: #a84d00;
  background: #ffead7;
}

.important-task-date {
  flex: 0 0 auto;
  text-align: right;
}

.important-task-date span,
.important-task-date time {
  display: block;
}

.important-task-date span {
  margin-bottom: 3px;
  color: #6d7785;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.important-task-date time {
  font-weight: 800;
}

/* Yearly planner dark mode */

html[data-theme="dark"] .planner-year-header p:last-child,
html[data-theme="dark"] .summary-label,
html[data-theme="dark"] .goal-card p,
html[data-theme="dark"] .year-month-header p,
html[data-theme="dark"] .mini-calendar-weekdays,
html[data-theme="dark"] .important-task p,
html[data-theme="dark"] .important-task-date span {
  color: #aab6c7;
}

html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .button.secondary {
  color: #e8edf5;
  background: #202c3c;
  border-color: #405069;
}

html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .goal-card,
html[data-theme="dark"] .year-month-card,
html[data-theme="dark"] .important-task {
  color: #e8edf5;
  background: #182231;
  border-color: #405069;
}

html[data-theme="dark"] .year-month-header h3 a {
  color: #e8edf5;
}

html[data-theme="dark"] .progress-track {
  background: #2b394b;
}

html[data-theme="dark"] .month-progress {
  color: #dce5ff;
  background: #2d416b;
}

html[data-theme="dark"] .mini-calendar-day {
  color: #d7dfeb;
  background: #202c3c;
}

html[data-theme="dark"] .mini-calendar-day:hover,
html[data-theme="dark"] .mini-calendar-day:focus-visible {
  border-color: #8da8ff;
  color: #ffffff;
  background: #2d416b;
}

html[data-theme="dark"]
  .mini-calendar-day.has-tasks:not(.is-today) {
  color: #dce5ff;
  background: #2d416b;
}

html[data-theme="dark"] .mini-calendar-day.is-today {
  color: #ffffff;
  background: #6687ff;
  border-color: #8da8ff;
}

html[data-theme="dark"] .urgency-badge.urgency-5 {
  color: #ffb4ad;
  background: #57201c;
}

html[data-theme="dark"] .urgency-badge.urgency-4 {
  color: #ffc18c;
  background: #573018;
}

/* Yearly planner responsive layout */

@media (max-width: 1050px) {
  .year-calendar-grid {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }
}

@media (max-width: 700px) {
  .planner-year-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .year-navigation {
    display: grid;
    grid-template-columns: 1fr;
  }

  .year-navigation .button {
    width: 100%;
    text-align: center;
  }

  .year-summary-grid,
  .year-calendar-grid {
    grid-template-columns: 1fr;
  }

  .important-task {
    align-items: flex-start;
    flex-direction: column;
  }

  .important-task-date {
    text-align: left;
  }
}
/* =========================================================
   10. Progress analytics dashboard
   ========================================================= */

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.analytics-header h1 {
  margin: 5px 0 8px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.analytics-header > div > p:last-child {
  margin-bottom: 0;
  color: #6d7785;
}

.analytics-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.analytics-stat {
  padding: 18px;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  background: #fff;
}

.analytics-stat span {
  display: block;
  margin-bottom: 8px;
  color: #6d7785;
  font-size: 0.82rem;
}

.analytics-stat strong {
  display: block;
  font-size: 1.75rem;
}

.analytics-stat-success {
  border-top: 4px solid #27ae60;
}

.analytics-stat-danger {
  border-top: 4px solid #c0392b;
}

.analytics-stat-primary {
  border-top: 4px solid #3659d9;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.analytics-grid > .panel {
  min-width: 0;
}

.analytics-rate {
  color: #3659d9;
  font-size: 1.6rem;
}

.analytics-overview progress,
.analytics-grid progress,
.category-row progress,
.analytics-goals progress {
  width: 100%;
  height: 13px;
  margin-top: 12px;
  accent-color: #3659d9;
}

.analytics-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 18px;
}

.analytics-breakdown span {
  color: #6d7785;
  font-size: 0.85rem;
}

.analytics-breakdown strong {
  display: block;
  margin-bottom: 3px;
  color: #17202a;
  font-size: 1.25rem;
}

.weekly-analytics {
  min-height: 240px;
  display: grid;
  grid-template-columns: repeat(7, minmax(56px, 1fr));
  align-items: end;
  gap: 14px;
  margin-top: 24px;
  overflow-x: auto;
}

.activity-day {
  min-width: 56px;
  text-align: center;
}

.activity-bar-track {
  width: 42px;
  height: 150px;
  display: flex;
  align-items: flex-end;
  margin: 0 auto 10px;
  overflow: hidden;
  border-radius: 10px;
  background: #e9eef5;
}

.activity-bar {
  width: 100%;
  min-height: 3px;
  border-radius: 10px;
  background: linear-gradient(180deg, #6687ff, #3659d9);
}

.activity-day strong,
.activity-day span,
.activity-day small {
  display: block;
}

.activity-day span {
  margin-top: 5px;
  font-weight: 700;
}

.activity-day small {
  margin-top: 3px;
  color: #6d7785;
}

.category-row {
  padding: 15px 0;
  border-bottom: 1px solid #e1e7ef;
}

.category-row:last-child {
  border-bottom: 0;
}

.category-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.category-heading small {
  display: block;
  margin-top: 4px;
  color: #6d7785;
}

.wellness-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.wellness-stats article {
  padding: 16px;
  border-radius: 12px;
  background: #f4f7fb;
}

.wellness-stats span,
.wellness-stats strong {
  display: block;
}

.wellness-stats span {
  margin-bottom: 7px;
  color: #6d7785;
  font-size: 0.8rem;
}

.wellness-stats strong {
  font-size: 1.3rem;
}

.wellness-stats .streak-card {
  grid-column: 1 / -1;
  color: #fff;
  background: linear-gradient(120deg, #3659d9, #6687ff);
}

.wellness-stats .streak-card span {
  color: #e8edff;
}

.analytics-goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.analytics-goals .goal {
  padding: 16px;
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  background: #f9fbfd;
}

.analytics-goals .goal > div > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wellness-history {
  margin-top: 16px;
}

.wellness-history-row {
  display: grid;
  grid-template-columns: 90px repeat(5, minmax(90px, 1fr));
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e1e7ef;
  font-size: 0.85rem;
}

.wellness-history-row:last-child {
  border-bottom: 0;
}

html[data-theme="dark"] .analytics-header > div > p:last-child,
html[data-theme="dark"] .analytics-stat span,
html[data-theme="dark"] .analytics-breakdown span,
html[data-theme="dark"] .activity-day small,
html[data-theme="dark"] .category-heading small,
html[data-theme="dark"] .wellness-stats span {
  color: #aab6c7;
}

html[data-theme="dark"] .analytics-stat {
  color: #e8edf5;
  background: #182231;
  border-color: #2b394b;
}

html[data-theme="dark"] .analytics-breakdown strong {
  color: #e8edf5;
}

html[data-theme="dark"] .analytics-rate {
  color: #8da8ff;
}

html[data-theme="dark"] .activity-bar-track {
  background: #2b394b;
}

html[data-theme="dark"] .category-row,
html[data-theme="dark"] .wellness-history-row {
  border-color: #2b394b;
}

html[data-theme="dark"] .wellness-stats article {
  background: #202c3c;
}

html[data-theme="dark"] .wellness-stats .streak-card {
  background: linear-gradient(120deg, #3659d9, #6687ff);
}

html[data-theme="dark"] .analytics-goals .goal {
  background: #202c3c;
  border-color: #2b394b;
}

@media (max-width: 1000px) {
  .analytics-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wellness-history-row {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media (max-width: 750px) {
  .analytics-header,
  .analytics-grid {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .analytics-header {
    flex-direction: column;
  }

  .analytics-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-goals {
    grid-template-columns: 1fr;
  }

  .wellness-history-row {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }
}

@media (max-width: 480px) {
  .analytics-stats,
  .wellness-stats,
  .wellness-history-row {
    grid-template-columns: 1fr;
  }

  .analytics-header .button {
    width: 100%;
    text-align: center;
  }
}
/* =========================================================
   11. Morning briefing
   ========================================================= */

/* Page heading */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 5px 0 8px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.page-header > div > p:last-child {
  margin: 0;
  color: #6d7785;
}

/* Main two-column briefing layout */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-grid > .panel {
  min-width: 0;
}

/* Recommended pace */

.briefing-focus {
  border-top: 5px solid #3659d9;
  background:
    linear-gradient(
      135deg,
      rgb(54 89 217 / 7%),
      transparent 55%
    ),
    #ffffff;
}

.briefing-focus h2 {
  margin-bottom: 8px;
}

.briefing-focus > p:last-of-type {
  color: #526071;
  line-height: 1.6;
}

.briefing-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.briefing-stats span {
  padding: 12px;
  border-radius: 10px;
  color: #6d7785;
  background: #f4f7fb;
  font-size: 0.85rem;
}

.briefing-stats strong {
  display: block;
  margin-top: 5px;
  color: #17202a;
  font-size: 1.05rem;
}

/* Workload summary */

.briefing-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.briefing-summary > div {
  min-width: 0;
  padding: 16px 10px;
  border-radius: 12px;
  background: #f4f7fb;
  text-align: center;
}

.briefing-summary strong,
.briefing-summary span {
  display: block;
}

.briefing-summary strong {
  margin-bottom: 6px;
  color: #3659d9;
  font-size: 1.65rem;
}

.briefing-summary span {
  color: #6d7785;
  font-size: 0.78rem;
}

/* Reminder from the previous evening */

.priority-reminder {
  border-left: 5px solid #6687ff;
  background:
    linear-gradient(
      90deg,
      rgb(102 135 255 / 9%),
      transparent 45%
    ),
    #ffffff;
}

.priority-reminder p:last-child {
  margin-bottom: 0;
  font-size: 1.08rem;
  line-height: 1.6;
}

/* Suggested and overdue task cards */

.task-list {
  display: grid;
  gap: 14px;
}

.task-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px;
  border: 1px solid #e1e7ef;
  border-left: 5px solid #9aa5b1;
  border-radius: 12px;
  background: #f9fbfd;
}

.task-card-content {
  min-width: 0;
  flex: 1;
}

.task-card h3 {
  margin: 9px 0 0;
  overflow-wrap: anywhere;
}

.task-card p {
  margin: 8px 0 0;
  color: #596678;
  line-height: 1.5;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.task-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  color: #4f5c6e;
  background: #e9eef5;
  font-size: 0.72rem;
  font-weight: 700;
}

.task-date,
.task-goal {
  font-size: 0.82rem;
}

.task-goal {
  color: #3659d9 !important;
  font-weight: 700;
}

.button-small {
  flex: 0 0 auto;
  padding: 9px 13px;
  font-size: 0.82rem;
}

.warning-panel {
  border-top: 5px solid #c0392b;
}

.warning-panel .section-heading > span {
  color: #a52d21;
  font-weight: 800;
}

/* Compact upcoming, wellness, and priority lists */

.compact-list {
  display: grid;
}

.compact-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #e1e7ef;
}

.compact-list-item:last-child {
  border-bottom: 0;
}

.compact-list-item div {
  min-width: 0;
}

.compact-list-item strong,
.compact-list-item small {
  display: block;
  overflow-wrap: anywhere;
}

.compact-list-item small {
  margin-top: 5px;
  color: #6d7785;
}

.compact-list-item > span {
  flex: 0 0 auto;
  color: #3659d9;
  font-size: 0.85rem;
  font-weight: 800;
}

/* Empty states */

.empty-state {
  padding: 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f9fbfd;
  text-align: center;
}

.empty-state h3 {
  margin-top: 0;
}

.empty-state p {
  color: #6d7785;
  line-height: 1.6;
}

.empty-state .button {
  margin-top: 6px;
}

/* Active goals */

.goal-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(220px, 1fr)
  );
  gap: 16px;
}

.goal-grid .goal-card {
  min-width: 0;
}

.goal-grid .goal-card h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

.goal-grid .goal-card p {
  margin: 8px 0 14px;
}

.goal-grid .progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3659d9, #6687ff);
}

.goal-grid .goal-card > strong {
  display: block;
  margin-top: 9px;
  color: #3659d9;
  font-size: 0.82rem;
}

/* Morning briefing dark mode */

html[data-theme="dark"] .page-header > div > p:last-child,
html[data-theme="dark"] .briefing-focus > p:last-of-type,
html[data-theme="dark"] .briefing-stats span,
html[data-theme="dark"] .briefing-summary span,
html[data-theme="dark"] .task-card p,
html[data-theme="dark"] .compact-list-item small,
html[data-theme="dark"] .empty-state p {
  color: #aab6c7;
}

html[data-theme="dark"] .briefing-focus,
html[data-theme="dark"] .priority-reminder {
  color: #e8edf5;
  background:
    linear-gradient(
      135deg,
      rgb(102 135 255 / 12%),
      transparent 55%
    ),
    #182231;
}

html[data-theme="dark"] .briefing-stats span,
html[data-theme="dark"] .briefing-summary > div {
  background: #202c3c;
}

html[data-theme="dark"] .briefing-stats strong {
  color: #e8edf5;
}

html[data-theme="dark"] .briefing-summary strong,
html[data-theme="dark"] .task-goal,
html[data-theme="dark"] .compact-list-item > span,
html[data-theme="dark"] .goal-grid .goal-card > strong {
  color: #8da8ff !important;
}

html[data-theme="dark"] .task-card,
html[data-theme="dark"] .empty-state {
  color: #e8edf5;
  background: #202c3c;
  border-color: #405069;
}

html[data-theme="dark"] .task-meta span {
  color: #d7dfeb;
  background: #2b394b;
}

html[data-theme="dark"] .compact-list-item {
  border-color: #2b394b;
}

html[data-theme="dark"] .warning-panel .section-heading > span {
  color: #ff9b92;
}

/* Morning briefing responsive layout */

@media (max-width: 800px) {
  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .page-header .button {
    width: 100%;
    text-align: center;
  }

  .task-card {
    align-items: stretch;
    flex-direction: column;
  }

  .task-card form,
  .task-card form .button {
    width: 100%;
  }

  .task-card form .button {
    text-align: center;
  }
}

@media (max-width: 500px) {
  .briefing-stats,
  .briefing-summary {
    grid-template-columns: 1fr;
  }

  .compact-list-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* Notification reminders */

.notification-panel {
  margin-bottom: 1.5rem;
}

.notification-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.9rem;
  background: var(--surface-color);
}

.notification-item p {
  margin: 0.35rem 0;
}

.notification-item small {
  color: var(--muted-color);
}

.notification-item form {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .notification-item {
    flex-direction: column;
  }
}

/* =========================================================
   13. Cleaner dashboard and grouped dropdown navigation
   ========================================================= */

body {
  line-height: 1.55;
  background:
    radial-gradient(circle at top left, rgb(54 89 217 / 7%), transparent 32rem),
    #f4f7fb;
}

.container {
  padding-top: 30px;
  padding-bottom: 48px;
}

.topbar {
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(16px);
}

.topbar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}

.navigation {
  overflow: visible;
}

.navigation > a,
.nav-dropdown > summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  color: #354052;
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.navigation > a:hover,
.navigation > a:focus-visible,
.nav-dropdown > summary:hover,
.nav-dropdown > summary:focus-visible,
.nav-dropdown[open] > summary {
  color: #2949bd;
  background: #eef2ff;
}

.nav-home {
  color: #2949bd !important;
  background: #eef2ff;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown > summary {
  list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -4px 0 0 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.nav-dropdown[open] > summary::after {
  margin-top: 3px;
  transform: rotate(225deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 200;
  width: max-content;
  min-width: 210px;
  padding: 8px;
  border: 1px solid #dfe6ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgb(23 32 42 / 16%);
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

.dropdown-menu a,
.nav-link-button {
  width: 100%;
  display: block;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  color: #354052;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible,
.nav-link-button:hover,
.nav-link-button:focus-visible {
  color: #2949bd;
  background: #f1f4fb;
}

.nav-form {
  margin: 4px 0 0;
  padding-top: 4px;
  border-top: 1px solid #e6ebf2;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid #dfe6ee;
  border-radius: 11px;
  color: #17202a;
  background: #f4f7fb;
  cursor: pointer;
  font-size: 1.15rem;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 24px;
  background: linear-gradient(135deg, #17233a 0%, #284893 62%, #3659d9 100%);
  box-shadow: 0 18px 50px rgb(23 32 42 / 16%);
}

.hero::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -85px;
  bottom: -145px;
  border-radius: 50%;
  background: rgb(255 255 255 / 9%);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.035em;
}

.stats {
  gap: 16px;
  margin: 24px 0;
}

.stats article,
.panel,
.form-card,
.card {
  border-color: #e4e9f1;
  box-shadow: 0 8px 24px rgb(23 32 42 / 5%);
}

.stats article {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stats strong {
  margin-bottom: 3px;
  color: #223d96;
  font-size: clamp(1.65rem, 4vw, 2.15rem);
}

.grid {
  gap: 22px;
}

.panel {
  padding: clamp(18px, 3vw, 24px);
}

.panel-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid #edf0f5;
}

.task {
  border-top: 1px solid #edf0f5;
  border-right: 1px solid #edf0f5;
  border-bottom: 1px solid #edf0f5;
  box-shadow: 0 4px 12px rgb(23 32 42 / 4%);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgb(82 118 255 / 10%), transparent 32rem),
    #101722;
}

html[data-theme="dark"] .topbar {
  background: rgb(24 34 49 / 92%);
}

html[data-theme="dark"] .navigation > a,
html[data-theme="dark"] .nav-dropdown > summary {
  color: #dce4f2;
}

html[data-theme="dark"] .navigation > a:hover,
html[data-theme="dark"] .nav-dropdown > summary:hover,
html[data-theme="dark"] .nav-dropdown[open] > summary,
html[data-theme="dark"] .nav-home {
  color: #dce5ff !important;
  background: #2d416b;
}

html[data-theme="dark"] .dropdown-menu {
  border-color: #34445a;
  background: #182231;
  box-shadow: 0 18px 45px rgb(0 0 0 / 35%);
}

html[data-theme="dark"] .dropdown-menu a,
html[data-theme="dark"] .nav-link-button {
  color: #dce4f2;
}

html[data-theme="dark"] .dropdown-menu a:hover,
html[data-theme="dark"] .nav-link-button:hover {
  color: #fff;
  background: #26354a;
}

html[data-theme="dark"] .nav-form,
html[data-theme="dark"] .panel-heading {
  border-color: #2b394b;
}

html[data-theme="dark"] .stats strong {
  color: #9eb2ff;
}

@media (max-width: 900px) {
  .topbar-inner {
    display: block;
  }

  .topbar-heading {
    width: 100%;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
  }

  .navigation {
    display: none;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #dfe6ee;
    border-radius: 14px;
    background: #fff;
    overflow: visible;
  }

  .navigation.is-open {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }

  .navigation > a,
  .nav-dropdown > summary {
    width: 100%;
    min-height: 44px;
  }

  .dropdown-menu,
  .dropdown-menu-right {
    position: static;
    width: 100%;
    margin: 3px 0 8px;
    border: 0;
    border-left: 3px solid #d7dff7;
    border-radius: 0 10px 10px 0;
    box-shadow: none;
  }

  .theme-toggle {
    margin: 4px 0 0;
  }

  html[data-theme="dark"] .navigation {
    border-color: #34445a;
    background: #182231;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 22px 16px 38px;
  }

  .hero {
    padding: 26px 22px;
    border-radius: 18px;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   14. Simple navigation — Dashboard, Finance, and one menu
   ========================================================= */

.simple-navigation {
  flex: 1 1 auto;
  gap: 6px;
}

.simple-navigation .nav-spacer {
  flex: 1 1 auto;
}

.simple-navigation .profile-link {
  color: #2949bd;
  background: #eef2ff;
}

.simple-navigation .nav-form-inline {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.simple-navigation .logout-button {
  width: auto;
  min-height: 40px;
  padding: 0 12px;
  color: #354052;
  font-weight: 750;
  white-space: nowrap;
}

.simple-navigation .theme-toggle {
  flex: 0 0 42px;
  margin-left: 2px;
}

html[data-theme="dark"] .simple-navigation .profile-link {
  color: #dce5ff;
  background: #2d416b;
}

html[data-theme="dark"] .simple-navigation .logout-button {
  color: #dce4f2;
}

/* =========================================================
   15. Finance dashboard and debt payoff plan
   ========================================================= */

.finance-header,
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.finance-header {
  margin-bottom: 26px;
}

.finance-header h1,
.section-heading h2 {
  margin: 4px 0 8px;
}

.finance-header p,
.section-heading p {
  margin-top: 0;
}

.finance-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.button-secondary {
  color: #2949bd;
  background: #eef2ff;
}

.button-secondary:hover,
.button-secondary:focus-visible {
  color: #fff;
  background: #2949bd;
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.finance-summary-card {
  min-width: 0;
  padding: 22px;
}

.finance-summary-card h2 {
  margin: 6px 0;
  color: #223d96;
  font-size: clamp(1.5rem, 3vw, 2rem);
  overflow-wrap: anywhere;
}

.finance-summary-card p:last-child {
  margin-bottom: 0;
  color: #6d7785;
}

.positive-amount { color: #18864b !important; }
.negative-amount { color: #c0392b !important; }

.finance-section { margin-top: 34px; }
.finance-section > .section-heading { margin-bottom: 16px; }

.finance-list {
  display: grid;
  gap: 14px;
}

.finance-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
}

.finance-list-item h3 { margin: 0 0 6px; }

.finance-list-item p {
  margin: 5px 0;
  color: #6d7785;
}

.finance-amount {
  flex-shrink: 0;
  color: #17202a;
  font-size: 1.2rem;
  white-space: nowrap;
}

.finance-item-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.finance-item-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: #2949bd;
  background: #eef2ff;
  font-size: 0.78rem;
  font-weight: 750;
}

.status-badge.muted {
  color: #526070;
  background: #edf1f5;
}

.debt-priority-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 18px;
  padding: 24px;
  color: #fff;
  border: 0;
  background:
    radial-gradient(circle at top right, rgb(255 255 255 / 14%), transparent 16rem),
    linear-gradient(135deg, #17233a, #2949bd);
}

.debt-priority-card h2 {
  margin: 5px 0 8px;
  color: #fff;
}

.debt-priority-card p {
  margin: 5px 0;
  color: #e1e8ff;
}

.debt-priority-card .eyebrow { color: #bfcaff; }

.debt-priority-amount {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  flex-shrink: 0;
  text-align: right;
}

.debt-priority-amount span,
.debt-priority-amount small { color: #dce4ff; }

.debt-priority-amount strong {
  margin: 4px 0;
  font-size: clamp(1.7rem, 4vw, 2.35rem);
}

.debt-list-item { align-items: stretch; }

.debt-main-content {
  flex: 1;
  min-width: 0;
}

.debt-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(125px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.debt-detail-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e4e9f1;
  border-radius: 11px;
  background: #f7f9fc;
}

.debt-detail-grid span,
.debt-detail-grid strong { display: block; }

.debt-detail-grid span {
  margin-bottom: 4px;
  color: #6d7785;
  font-size: 0.78rem;
}

.debt-detail-grid strong { overflow-wrap: anywhere; }

.debt-balance {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  min-width: 150px;
  padding-left: 20px;
  border-left: 1px solid #e4e9f1;
  text-align: right;
}

.debt-balance span,
.debt-balance small { color: #6d7785; }
.debt-balance strong { margin: 5px 0; }

.debt-notes {
  margin-top: 14px !important;
  padding: 11px 13px;
  border-left: 3px solid #7d94ed;
  border-radius: 0 8px 8px 0;
  background: #f4f6fd;
}

.finance-table-wrapper {
  overflow-x: auto;
  border: 1px solid #e4e9f1;
  border-radius: 14px;
  background: #fff;
}

.finance-table {
  width: 100%;
  border-collapse: collapse;
}

.finance-table th,
.finance-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #edf0f5;
  text-align: left;
  white-space: nowrap;
}

.finance-table th {
  color: #526070;
  background: #f7f9fc;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.finance-table tbody tr:last-child td { border-bottom: 0; }
.finance-table tbody tr:hover { background: #fafbfe; }

.finance-table td strong,
.finance-table td small { display: block; }

.finance-table td small {
  margin-top: 3px;
  color: #6d7785;
}

html[data-theme="dark"] .finance-summary-card h2 { color: #a8b8ff; }

html[data-theme="dark"] .finance-summary-card p:last-child,
html[data-theme="dark"] .finance-list-item p,
html[data-theme="dark"] .debt-detail-grid span,
html[data-theme="dark"] .debt-balance span,
html[data-theme="dark"] .debt-balance small { color: #aeb9c9; }

html[data-theme="dark"] .finance-amount { color: #e8edf5; }

html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .status-badge {
  color: #dce5ff;
  background: #2d416b;
}

html[data-theme="dark"] .status-badge.muted {
  color: #d7dfeb;
  background: #2b394b;
}

html[data-theme="dark"] .debt-detail-grid > div,
html[data-theme="dark"] .finance-table th {
  border-color: #34445a;
  background: #263445;
}

html[data-theme="dark"] .debt-balance { border-color: #34445a; }

html[data-theme="dark"] .debt-notes {
  color: #dce4f2;
  background: #26354a;
}

html[data-theme="dark"] .finance-table-wrapper {
  border-color: #34445a;
  background: #202c3c;
}

html[data-theme="dark"] .finance-table td { border-color: #34445a; }
html[data-theme="dark"] .finance-table tbody tr:hover { background: #263445; }

@media (max-width: 1000px) {
  .finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debt-detail-grid { grid-template-columns: repeat(2, minmax(125px, 1fr)); }
}

@media (max-width: 700px) {
  .finance-header,
  .section-heading,
  .finance-list-item,
  .debt-priority-card {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-actions { justify-content: flex-start; }

  .finance-actions .button,
  .section-heading .button { text-align: center; }

  .debt-priority-amount {
    align-items: flex-start;
    text-align: left;
  }

  .debt-balance {
    align-items: flex-start;
    min-width: 0;
    padding: 16px 0 0;
    border-top: 1px solid #e4e9f1;
    border-left: 0;
    text-align: left;
  }

  html[data-theme="dark"] .debt-balance { border-top-color: #34445a; }
}

@media (max-width: 500px) {
  .finance-summary,
  .debt-detail-grid { grid-template-columns: 1fr; }

  .finance-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .finance-summary-card,
  .finance-list-item,
  .debt-priority-card { padding: 18px; }
}

@media (max-width: 360px) {
  .finance-actions { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .simple-navigation .nav-spacer {
    display: none;
  }

  .simple-navigation .nav-form-inline {
    width: 100%;
  }

  .simple-navigation .logout-button {
    width: 100%;
    min-height: 44px;
    text-align: left;
  }

  .simple-navigation .theme-toggle {
    width: 100%;
    flex-basis: 44px;
  }
}

/* =========================================================
   16. Health and fitness dashboard
   ========================================================= */

.button-group {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.health-dashboard .dashboard-grid,
.two-column-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.two-column-grid {
  margin-top: 22px;
}

.card {
  min-width: 0;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid #e4e9f1;
  border-radius: 18px;
  background: #ffffff;
}

.card > h2 {
  margin: 6px 0;
  color: #223d96;
  font-size: clamp(1.6rem, 4vw, 2.15rem);
}

.card progress {
  width: 100%;
  height: 12px;
  margin: 12px 0 4px;
  border: 0;
  border-radius: 999px;
  background: #e8edf5;
  overflow: hidden;
}

.card progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #e8edf5;
}

.card progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #3659d9, #5b7cff);
}

.card progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #3659d9, #5b7cff);
}

.stack-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid #edf0f5;
}

.list-item:first-child {
  border-top: 0;
}

.list-item h3,
.list-item p {
  margin: 0;
}

.list-item p {
  margin-top: 4px;
  color: #6d7785;
}

.highlight-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff, #f7f9ff);
}

.highlight-card strong {
  color: #223d96;
  font-size: 1.65rem;
}

.highlight-card p {
  margin: 5px 0 0;
  color: #526071;
}

html[data-theme="dark"] .card {
  border-color: #34445a;
  background: #202c3c;
}

html[data-theme="dark"] .card > h2,
html[data-theme="dark"] .highlight-card strong {
  color: #a8b8ff;
}

html[data-theme="dark"] .list-item {
  border-color: #34445a;
}

html[data-theme="dark"] .list-item p,
html[data-theme="dark"] .highlight-card p {
  color: #aeb9c9;
}

html[data-theme="dark"] .highlight-card {
  background: linear-gradient(135deg, #263b65, #263445);
}

html[data-theme="dark"] .card progress,
html[data-theme="dark"] .card progress::-webkit-progress-bar {
  background: #34445a;
}

@media (max-width: 800px) {
  .page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .button-group {
    justify-content: flex-start;
  }

  .two-column-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .button-group {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button-group .button {
    width: 100%;
    text-align: center;
  }

  .list-item {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   17. Main dashboard redesign
   ========================================================= */

.dashboard-shell {
  display: grid;
  gap: 22px;
}

.dashboard-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(26px, 5vw, 46px);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgb(255 255 255 / 18%), transparent 25rem),
    linear-gradient(135deg, #2748ba, #365fd8 55%, #5c78de);
  box-shadow: 0 20px 45px rgb(39 72 186 / 22%);
  overflow: hidden;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -170px;
  width: 320px;
  height: 320px;
  border: 44px solid rgb(255 255 255 / 7%);
  border-radius: 50%;
}

.dashboard-hero > * {
  position: relative;
  z-index: 1;
}

.dashboard-hero .eyebrow {
  color: #dce5ff;
}

.dashboard-hero h1 {
  max-width: 760px;
  margin: 6px 0 10px;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.04em;
}

.dashboard-hero-copy > p:last-child {
  max-width: 650px;
  margin: 0;
  color: #e8edff;
  font-size: 1.05rem;
  line-height: 1.65;
}

.dashboard-primary-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 240px;
}

.dashboard-primary-actions .button {
  color: #2748ba;
  background: #fff;
}

.dashboard-primary-actions .button.secondary {
  color: #fff;
  border-color: rgb(255 255 255 / 35%);
  background: rgb(255 255 255 / 12%);
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.quick-action-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e1e7f0;
  border-radius: 16px;
  color: #263245;
  background: #fff;
  box-shadow: 0 8px 22px rgb(23 32 42 / 5%);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.quick-action-card:hover,
.quick-action-card:focus-visible {
  border-color: #b7c5f4;
  box-shadow: 0 12px 28px rgb(39 72 186 / 12%);
  transform: translateY(-2px);
}

.quick-action-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: #2949bd;
  background: #eef2ff;
  font-size: 1.15rem;
  font-weight: 850;
}

.quick-action-card strong,
.quick-action-card small {
  display: block;
}

.quick-action-card small {
  margin-top: 3px;
  color: #6d7785;
}

.dashboard-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.overview-card {
  position: relative;
  min-width: 0;
  padding: 20px;
  border: 1px solid #e4e9f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgb(23 32 42 / 5%);
  overflow: hidden;
}

.overview-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #5270d8;
}

.overview-card-success::before {
  background: #2e9b6f;
}

.overview-card-warning::before {
  background: #d8862f;
}

.overview-label,
.overview-card small {
  display: block;
  color: #6d7785;
}

.overview-label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.overview-card strong {
  display: block;
  margin: 8px 0 3px;
  color: #223d96;
  font-size: clamp(1.8rem, 4vw, 2.35rem);
}

.dashboard-progress-card {
  margin: 0;
}

.dashboard-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.85fr);
  align-items: start;
  gap: 22px;
}

.dashboard-priority-panel {
  min-width: 0;
}

.dashboard-task-list {
  display: grid;
  gap: 12px;
}

.dashboard-sidebar {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.dashboard-side-card {
  margin: 0;
}

.side-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.side-card-heading h2,
.side-card-heading p {
  margin: 0;
}

.side-card-heading h2 {
  margin-top: 4px;
}

.dashboard-goal + .dashboard-goal,
.dashboard-upcoming-task + .dashboard-upcoming-task {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #edf0f5;
}

.dashboard-upcoming-task {
  display: grid;
  gap: 4px;
}

.compact-empty-state {
  padding: 14px;
  border-radius: 12px;
  background: #f5f7fb;
}

.compact-empty-state p {
  margin-top: 0;
}

.dashboard-empty-state {
  padding: 42px 20px;
  text-align: center;
}

.empty-state-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  color: #277653;
  background: #e3f6ee;
  font-size: 1.4rem;
  font-weight: 900;
}

.dashboard-overdue-card {
  border-color: #f1c9c9;
  background: linear-gradient(135deg, #fff7f7, #fff);
}

.dashboard-overdue-card h2 {
  margin: 4px 0;
}

html[data-theme="dark"] .quick-action-card,
html[data-theme="dark"] .overview-card {
  border-color: #34445a;
  color: #e5ebf4;
  background: #202c3c;
}

html[data-theme="dark"] .quick-action-card small,
html[data-theme="dark"] .overview-label,
html[data-theme="dark"] .overview-card small {
  color: #aeb9c9;
}

html[data-theme="dark"] .quick-action-icon,
html[data-theme="dark"] .compact-empty-state {
  color: #c7d2ff;
  background: #2d416b;
}

html[data-theme="dark"] .overview-card strong {
  color: #a8b8ff;
}

html[data-theme="dark"] .dashboard-goal + .dashboard-goal,
html[data-theme="dark"] .dashboard-upcoming-task + .dashboard-upcoming-task {
  border-color: #34445a;
}

html[data-theme="dark"] .dashboard-overdue-card {
  border-color: #74434a;
  background: linear-gradient(135deg, #402a31, #202c3c);
}

@media (max-width: 1050px) {
  .quick-action-grid,
  .dashboard-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-content-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.8fr);
  }
}

@media (max-width: 800px) {
  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-primary-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .dashboard-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .dashboard-shell {
    gap: 16px;
  }

  .dashboard-hero {
    padding: 26px 22px;
    border-radius: 18px;
  }

  .dashboard-primary-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .dashboard-primary-actions .button {
    width: 100%;
    text-align: center;
  }

  .quick-action-grid,
  .dashboard-overview {
    grid-template-columns: 1fr;
  }

  .quick-action-card,
  .overview-card {
    padding: 15px;
  }

  .dashboard-reminders .panel-heading,
  .dashboard-reminders .notification-item {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-reminders .button {
    width: 100%;
  }
}

/* =========================================================
   18. Grouped navigation refinements
   ========================================================= */

.nav-profile-dropdown {
  margin-left: 4px;
}

.nav-profile-summary {
  color: #2949bd !important;
  background: #eef2ff;
}

.nav-profile-summary::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #2e9b6f;
  box-shadow: 0 0 0 3px rgb(46 155 111 / 14%);
}

html[data-theme="dark"] .nav-profile-summary {
  color: #dce5ff !important;
  background: #2d416b;
}

@media (max-width: 900px) {
  .nav-profile-dropdown {
    margin-left: 0;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-profile-summary {
    width: 100%;
  }

  .navigation .theme-toggle {
    width: 100%;
    min-height: 44px;
  }
}

/* =========================================================
   19. Dashboard health and finance snapshots
   ========================================================= */

.dashboard-life-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.life-summary-card {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.life-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: #2e9b6f;
}

.finance-summary-card-main::before {
  background: #5270d8;
}

.life-summary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.life-summary-heading h2,
.life-summary-heading p {
  margin: 0;
}

.life-summary-heading h2 {
  margin-top: 4px;
}

.life-summary-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.life-summary-stats > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e8edf3;
  border-radius: 13px;
  background: #f8fafc;
}

.life-summary-stats strong,
.life-summary-stats span {
  display: block;
}

.life-summary-stats strong {
  color: #223d96;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  overflow-wrap: anywhere;
}

.health-summary-card .life-summary-stats strong {
  color: #277653;
}

.life-summary-stats span {
  margin-top: 3px;
  color: #6d7785;
  font-size: 0.84rem;
}

html[data-theme="dark"] .life-summary-stats > div {
  border-color: #34445a;
  background: #263445;
}

html[data-theme="dark"] .life-summary-stats strong {
  color: #a8b8ff;
}

html[data-theme="dark"] .health-summary-card .life-summary-stats strong {
  color: #83d4b2;
}

html[data-theme="dark"] .life-summary-stats span {
  color: #aeb9c9;
}

@media (max-width: 900px) {
  .dashboard-life-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .life-summary-heading {
    flex-direction: column;
  }

  .life-summary-stats {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Step 16A: Weekly task search and filters
   ========================================================= */

.task-filter-panel {
  margin-top: 20px;
}

.task-filter-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.task-filter-heading h2,
.task-filter-heading p {
  margin: 0;
}

.task-filter-heading h2 {
  margin-top: 4px;
}

.active-filter-count {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  color: #223d96;
  background: #edf1ff;
  border: 1px solid #d6defe;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.task-filter-form {
  display: grid;
  grid-template-columns:
    minmax(240px, 2fr)
    repeat(3, minmax(145px, 1fr))
    auto;
  gap: 14px;
  align-items: end;
}

.task-filter-form > div {
  min-width: 0;
}

.task-filter-form label {
  display: block;
  margin-bottom: 7px;
  color: #354052;
  font-size: 0.84rem;
  font-weight: 800;
}

.task-filter-form input,
.task-filter-form select {
  width: 100%;
  min-height: 45px;
  padding: 10px 12px;
  color: #17202a;
  background: #ffffff;
  border: 1px solid #cfd8e4;
  border-radius: 10px;
  font: inherit;
}

.task-filter-form input:focus,
.task-filter-form select:focus {
  border-color: #3659d9;
  outline: 3px solid rgba(54, 89, 217, 0.16);
}

.task-filter-actions {
  display: flex;
  gap: 8px;
}

.task-filter-actions .button {
  min-height: 45px;
  white-space: nowrap;
}

.task-filter-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  color: #6d7785;
  border-top: 1px solid #e1e7ef;
}

.task-filter-summary strong {
  color: #17202a;
}

.filter-empty-state {
  padding: 38px 24px;
  text-align: center;
}

.filter-empty-state h2 {
  margin-top: 0;
}

.filter-empty-state p {
  color: #6d7785;
}

html[data-theme="dark"] .active-filter-count {
  color: #b9c5ff;
  background: #293557;
  border-color: #475783;
}

html[data-theme="dark"] .task-filter-form label {
  color: #d8dfeb;
}

html[data-theme="dark"] .task-filter-form input,
html[data-theme="dark"] .task-filter-form select {
  color: #edf2f8;
  background: #263445;
  border-color: #43536a;
}

html[data-theme="dark"] .task-filter-summary {
  color: #aeb9c9;
  border-color: #34445a;
}

html[data-theme="dark"] .task-filter-summary strong {
  color: #edf2f8;
}

html[data-theme="dark"] .filter-empty-state p {
  color: #aeb9c9;
}

@media (max-width: 1100px) {
  .task-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-search-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .task-filter-heading {
    flex-direction: column;
  }

  .task-filter-form {
    grid-template-columns: 1fr;
  }

  .task-search-field {
    grid-column: auto;
  }

  .task-filter-actions {
    flex-direction: column;
  }

  .task-filter-actions .button {
    width: 100%;
    text-align: center;
  }

  .task-filter-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}
/* =========================================================
   Step 16D: Planner date navigation
   ========================================================= */

.planner-date-jump {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
}

.planner-date-jump p,
.planner-date-jump h2 {
  margin: 0;
}

.planner-date-jump h2 {
  margin-top: 4px;
  font-size: 1.15rem;
}

.planner-date-jump-form {
  display: flex;
  align-items: end;
  gap: 10px;
}

.planner-date-jump-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

.planner-date-jump-form input[type="date"],
.planner-date-jump-form input[type="number"] {
  min-width: 170px;
  min-height: 45px;
  padding: 10px 12px;
  color: #17202a;
  background: #ffffff;
  border: 1px solid #cfd8e4;
  border-radius: 10px;
  font: inherit;
}

.planner-date-jump-form input:focus {
  border-color: #3659d9;
  outline: 3px solid rgba(54, 89, 217, 0.16);
}

.planner-date-jump-form .button {
  min-height: 45px;
  white-space: nowrap;
}

html[data-theme="dark"] .planner-date-jump {
  background: #202c3b;
  border-color: #34445a;
}

html[data-theme="dark"]
  .planner-date-jump-form input[type="date"],
html[data-theme="dark"]
  .planner-date-jump-form input[type="number"] {
  color: #edf2f8;
  color-scheme: dark;
  background: #263445;
  border-color: #43536a;
}

@media (max-width: 650px) {
  .planner-date-jump {
    align-items: stretch;
    flex-direction: column;
  }

  .planner-date-jump-form {
    align-items: stretch;
    flex-direction: column;
  }

  .planner-date-jump-form input[type="date"],
  .planner-date-jump-form input[type="number"],
  .planner-date-jump-form .button {
    width: 100%;
  }
}
/* =========================================================
   Step 17A: Email notification preferences
   ========================================================= */

.email-settings-card {
  border-color: #ccd7ff;
  background:
    linear-gradient(
      145deg,
      rgba(238, 242, 255, 0.72),
      #ffffff 45%
    );
}

.email-address-summary {
  margin-bottom: 20px;
  padding: 16px;
  background: #f7f9fc;
  border: 1px solid #dfe6ee;
  border-radius: 13px;
}

.email-address-summary span,
.email-address-summary strong {
  display: block;
}

.email-address-summary span {
  margin-bottom: 5px;
  color: #6d7785;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.email-address-summary strong {
  color: #223d96;
  overflow-wrap: anywhere;
}

.email-address-summary p {
  margin: 6px 0 0;
  color: #6d7785;
}

.email-master-setting {
  margin-bottom: 18px;
  padding: 16px;
  background: #edf1ff;
  border: 1px solid #d6defe;
  border-radius: 13px;
}

.email-preference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.email-preference-grid .checkbox-setting {
  height: 100%;
  margin: 0;
  padding: 15px;
  background: #ffffff;
  border: 1px solid #e1e7ef;
  border-radius: 13px;
}

html[data-theme="dark"] .email-settings-card {
  border-color: #475783;
  background:
    linear-gradient(
      145deg,
      rgba(41, 53, 87, 0.72),
      #202c3b 45%
    );
}

html[data-theme="dark"] .email-address-summary {
  background: #263445;
  border-color: #43536a;
}

html[data-theme="dark"] .email-address-summary span,
html[data-theme="dark"] .email-address-summary p {
  color: #aeb9c9;
}

html[data-theme="dark"] .email-address-summary strong {
  color: #b9c5ff;
}

html[data-theme="dark"] .email-master-setting {
  background: #293557;
  border-color: #475783;
}

html[data-theme="dark"]
  .email-preference-grid
  .checkbox-setting {
  background: #263445;
  border-color: #43536a;
}

@media (max-width: 700px) {
  .email-preference-grid {
    grid-template-columns: 1fr;
  }
}