/* styles.css - optional custom overrides */

body {
  font-family: system-ui, sans-serif;
  background-color: #f9fafb;
  color: #333;
}

nav a {
  transition: all 0.2s ease-in-out;
}

nav a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

form.taskForm input:disabled,
form.taskForm textarea:disabled,
form.taskForm select:disabled {
  background-color: transparent;
  cursor: default;
}

/* =========================================
   Navigation Styles (Mobile Friendly)
   ========================================= */

/* ===== Pill-style nav (pure CSS) ===== */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;                 /* ~gap-2 */
  padding: 0.375rem 0.75rem;   /* ~px-3 py-1.5 */
  border-radius: 9999px;       /* rounded-full */
  font-size: 0.875rem;         /* text-sm */
  font-weight: 600;            /* font-medium */
  line-height: 1;
  color: #111827;              /* gray-900 */
  background: transparent;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.nav-pill:hover { background: #f3f4f6; }              /* hover:bg-gray-100 */
.nav-pill.is-active {
  background: #2563eb;                                /* bg-blue-600 */
  color: #fff;                                        /* text-white */
  box-shadow: 0 1px 2px rgba(0,0,0,.05);              /* shadow-sm */
}

/* Mobile menu item style (optional) */
.m-link {
  display:inline-flex; align-items:center; gap:0.75rem;
  padding:0.5rem 0.5rem; border-radius:0.5rem;
  font-size:0.875rem;
  transition: background-color .2s ease, color .2s ease;
}
.m-link:hover { background:#f9fafb; }                 /* hover:bg-gray-50 */
.m-link.is-active { background:#eff6ff; color:#1d4ed8; } /* bg-blue-50 text-blue-700 */

/* Mobile menu spacing */
#mobileMenu .m-link + .m-link { margin-top: .25rem; }

/* Ensure pill anchors keep rounded look on all breakpoints */
header nav a,
#mobileMenu a {
  border-radius: 9999px; /* rounded-full */
}