:root {
  --app-primary: #4f46e5;
  --app-navy: #18204b;
  --app-ink: #1f2937;
  --app-muted: #64748b;
  --app-surface: #ffffff;
  --app-canvas: #f5f7fb;
}

body { background: var(--app-canvas); color: var(--app-ink); }
.app-navbar { background: linear-gradient(110deg, #1e1b4b, #4338ca); }
.brand-mark { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: .5rem; background: #fff; color: var(--app-primary); font-size: 1.1rem; }
.user-name { max-width: 12rem; }
.app-main > h1, .app-main > .page-heading { color: var(--app-navy); font-weight: 700; letter-spacing: -.03em; margin-bottom: 1.5rem; }

/* Shared view primitives keep the pre-existing pages consistent. */
.app-main > form:not([onsubmit]), .app-main > section {
  background: var(--app-surface); border: 1px solid #e7eaf2; border-radius: .9rem;
}
.app-main > form:not([onsubmit]) { max-width: 43rem; padding: 1.75rem; box-shadow: 0 .35rem 1.25rem rgba(30, 41, 59, .05); }
.app-main > section { padding: 1.25rem; margin-bottom: 1rem; }
article, .todo-card { background: var(--app-surface); border: 1px solid #e7eaf2; border-radius: .85rem; padding: 1.25rem; margin: 1rem 0; box-shadow: 0 .2rem .75rem rgba(30, 41, 59, .04); }
article h2 { font-size: 1.15rem; margin-bottom: .45rem; color: var(--app-navy); }
article p { color: var(--app-muted); margin-bottom: .55rem; }

form > div, form > label { display: block; margin-bottom: 1rem; }
label { color: #334155; font-weight: 600; font-size: .9rem; }
input:not([type="checkbox"]), textarea, select { display: block; width: 100%; margin-top: .35rem; padding: .55rem .7rem; border: 1px solid #cbd5e1; border-radius: .45rem; background: #fff; }
textarea { min-height: 7rem; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: #818cf8; outline: 0; box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .16); }
span.field-validation-error, [data-valmsg-for] { color: #b91c1c; display: block; font-size: .85rem; margin-top: .25rem; }
[asp-validation-summary] ul { margin: 0; padding-left: 1.15rem; color: #b91c1c; }

.app-main button:not(.navbar-toggler):not([class*="btn"]), .app-main > a:not(.page-link):not(.btn), article > a:not(.btn), section a:not(.btn) {
  display: inline-block; border: 1px solid var(--app-primary); border-radius: .45rem; padding: .48rem .8rem; background: var(--app-primary); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; vertical-align: middle;
}
.app-main button:not(.navbar-toggler):not([class*="btn"]) { margin-top: .25rem; }
.app-main button:not(.navbar-toggler):not([class*="btn"]):hover, .app-main > a:not(.page-link):not(.btn):hover, article > a:not(.btn):hover, section a:not(.btn):hover { background: #4338ca; border-color: #4338ca; color: #fff; }
form { margin-bottom: .75rem; }
form[onsubmit], article form { display: inline-flex; margin: 0; vertical-align: middle; }
form[onsubmit] button, article form button { margin: 0; }
form[onsubmit] .btn-outline-danger { background: transparent; color: #dc3545; }
form[onsubmit] .btn-outline-danger:hover { background: #dc3545; color: #fff; }

/* Preserve Bootstrap's intent when a view chooses an outline or light variant. */
.app-main .btn.btn-outline-primary, .app-main .btn.btn-outline-secondary,
.app-main .btn.btn-outline-danger { background: transparent; }
.app-main .btn.btn-outline-primary { color: var(--app-primary); }
.app-main .btn.btn-outline-secondary { color: #6c757d; border-color: #6c757d; }
.app-main .btn.btn-outline-danger { color: #dc3545; border-color: #dc3545; }
.app-main .btn.btn-outline-primary:hover { background: var(--app-primary); color: #fff; }
.app-main .btn.btn-outline-secondary:hover { background: #6c757d; color: #fff; }
.app-main .btn.btn-outline-danger:hover { background: #dc3545; color: #fff; }
.app-main .btn.btn-sm { padding: .25rem .5rem !important; font-size: .875rem !important; line-height: 1.5 !important; }

/* Action hierarchy: create, view, edit, and delete are visually distinct everywhere. */
.app-main .btn-create { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
.app-main .btn-create:hover { background: #4338ca; border-color: #4338ca; color: #fff; }
.app-main .btn-view { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.app-main .btn-view:hover { background: #0b5ed7; border-color: #0a58ca; color: #fff; }
.app-main .btn-edit { background: transparent; border-color: #64748b; color: #475569; }
.app-main .btn-edit:hover { background: #64748b; border-color: #64748b; color: #fff; }
.app-main .btn-delete { background: transparent; border-color: #dc3545; color: #dc3545; }
.app-main .btn-delete:hover { background: #dc3545; border-color: #dc3545; color: #fff; }
.tag-link { color: var(--app-primary); font-weight: 600; text-decoration: none; }
.tag-link:hover { color: #3730a3; text-decoration: underline; }
.task-description { white-space: pre-line; color: var(--app-ink); line-height: 1.65; }
.task-content { max-width: 48rem; margin-bottom: 1rem; }
.task-content h2 { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); }
.task-metadata { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; max-width: 48rem; margin-bottom: 1.25rem; }
.task-metadata > div { padding: .75rem; background: var(--app-surface); border: 1px solid #e7eaf2; border-radius: .65rem; }
.task-metadata dt { color: var(--app-muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.task-metadata dd { margin: .2rem 0 0; overflow-wrap: anywhere; font-size: .9rem; }
.comment-text { white-space: pre-line; color: var(--app-ink) !important; line-height: 1.65; }
.comment-metadata { color: var(--app-muted) !important; font-size: .85rem; margin-bottom: 1rem !important; }

mark { border-radius: 999px; padding: .25rem .55rem; background: #fee2e2; color: #b91c1c; font-size: .78rem; font-weight: 700; }
ul { padding-left: 1.2rem; }
li { margin-bottom: .45rem; }
.pagination .page-link { color: var(--app-primary); }
.pagination .active .page-link { background-color: var(--app-primary); border-color: var(--app-primary); color: #fff !important; }

@media (max-width: 575.98px) {
  .app-main > form:not([onsubmit]) { padding: 1.25rem; }
  .app-main > h1 { font-size: 1.8rem; }
}