/* To-Do form layout (mobile/tablet safe) */
.todo-form .todo-row {
  display: flex;
  align-items: center;
  gap: 8px !important;              /* force space between input / Record / Add */
  flex-wrap: nowrap;
}

/* Fallback spacing even if the parent flex gap is overridden */
.todo-form .todo-row .btn + .btn,
.todo-form .btn + .btn,
.todo-filters .btn + .btn {
  margin-left: 8px !important;   /* ensures space between Record / Add and All / Active / Done */
}

/* Phone: allow wrapping so controls don't collide */
@media (max-width: 600px){
  .todo-form .todo-row {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
}

/* Let the input take remaining width so buttons stay visible */
.todo-form .todo-row #todo-input {
  flex: 1 1 auto;
  min-width: 0;             /* avoid overflow on very narrow devices */
}

/* Keep buttons compact but readable */
.todo-form .todo-row .btn {
  flex: 0 0 auto;
}

/* Filters row */
.todo-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Gold-outline pill style */
.todo-filters .btn {
  border: 1px solid #b08a48;
  color: #b08a48;
  background-color: #ffffff;
  border-radius: 0;
  padding: 4px 12px;
  line-height: 1.25;
}


/* Active/pressed = filled gold */
.todo-filters .btn[aria-pressed="true"],
.todo-filters .btn.active {
  background-color: #b08a48;
  color: #ffffff;
}

/* Counter spacing */
#todo-counter {
  margin-left: 8px;
  color: #6c757d;
}

/* === NEW: Filters layout + gold theme === */
.todo-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px !important;      /* ensure space between All / Active / Done */
  margin-top: 8px;
}

/* Gold-outline; pressed state fills gold — match site pill radius */
.todo-filters .btn {
  border: 1px solid #b08a48 !important;
  color: #b08a48 !important;
  background-color: #ffffff !important;
  border-radius: .5rem !important;    /* rounded like the rest of the site */
  padding: 4px 12px !important;
  line-height: 1.25 !important;
}


.todo-filters .btn.tiny {
  font-size: 0.875rem;
  padding: 3px 10px;
}

.todo-filters .btn[aria-pressed="true"],
.todo-filters .btn.active {
  background-color: #b08a48 !important;
  color: #ffffff !important;
  border-color: #b08a48 !important;
}

/* Counter spacing so it doesn't collide with pills */
#todo-counter {
  margin-left: 8px;
  color: #6c757d; /* muted */
}

/* Optional: make the small 'X' in the rail gold-themed too */
.rail-list .delete {
  border: 1px solid #b08a48;
  color: #b08a48;
  background: #fff;
  border-radius: 0;                         /* square, not round */
  padding: 0;                               /* let size be set explicitly */
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.rail-list .delete:hover {
  background: #b08a48;
  color: #fff;
}
/* TEMP FIX: space To-Do filter chips and force gold theme without relying on classes */
/* (removed TEMP FIX override block to allow main To-Do styles to apply) */
/* To-Do checkbox: size + brand gold color */
.todo-list input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--brand-gold, #b08a48);
  vertical-align: middle;
}

/* Space between checkbox and text so words aren't jammed against the box */
.todo-list label,
.todo-list .todo-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Keep item text from colliding with controls */
.todo-list .todo-text{
  flex: 1 1 auto;
  min-width: 0;
}

/* Make close/delete controls compact and on-brand */
.todo-list .btn-close,
.todo-quicklist .btn-close,
.btn-close{
  width: 0.9rem;
  height: 0.9rem;
  opacity: 1 !important;
  filter: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b08a48'%3E%3Cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 1 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important; /* gold X */
  background-size: 1rem 1rem !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.todo-list .btn-close:hover,
.todo-quicklist .btn-close:hover,
.btn-close:hover{
  opacity: 1 !important;
}
.todo-list .btn-close:focus,
.todo-quicklist .btn-close:focus,
.btn-close:focus{
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25) !important;
  outline: none !important;
}

/* Quick List close buttons (mobile + desktop) — small gold X, no grey boxes */
.todo-quicklist .btn-close,
.todo-quicklist button[aria-label="Close"] {
  width: .8rem !important;                 /* smaller */
  height: .8rem !important;
  opacity: 1 !important;
  border: 1px solid #b08a48 !important;    /* square outline */
  border-radius: 0 !important;             /* square, not round */
  background: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b08a48'%3E%3Cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 1 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: .8rem .8rem !important; /* match the square */
}

/* If the X is an outline button on some breakpoints, force gold outline + pill */
.todo-quicklist .btn-outline-secondary,
.todo-quicklist .btn-outline-primary {
  border-color: #b08a48 !important;
  color: #b08a48 !important;
  background-color: #fff !important;
  border-radius: 0 !important;            /* square, not round */
  width: 1rem !important;                  /* small square */
  height: 1rem !important;
  padding: 0 !important;                   /* make it a neat square */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.todo-quicklist .btn-outline-secondary:hover,
.todo-quicklist .btn-outline-primary:hover {
  background-color: #b08a48 !important;
  color: #fff !important;
  border-color: #b08a48 !important;
}

/* Keep each to-do item on one line and push the X to the end */
.todo-quicklist .todo-item,
.todo-list .todo-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* The text takes the space; the X sits at the far right */
.todo-quicklist .todo-text,
.todo-list .todo-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Whichever control is used for delete, push it to the end */
.todo-quicklist .todo-item .btn-close,
.todo-quicklist .todo-item .btn-outline-secondary,
.todo-quicklist .todo-item .btn-outline-primary,
.todo-list .todo-item .btn-close {
  margin-left: auto !important;
}

/* To-Do Quick List (right rail) – base list reset */
#todoQuickList .rail-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Layout each to-do as a single row */
#todoQuickList .rail-list .rail-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Text grows; allow wrap/clip without pushing the X down */
#todoQuickList .rail-list .rail-item > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;                /* prevents wrap forcing the button to a new line */
  overflow: hidden !important;
  word-break: break-word !important;
}

/* Delete button stays small and at the far right */
#todoQuickList .rail-list .rail-item > button.delete {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
#todoQuickList .rail-list .rail-item > button.delete {
  width: 0.9rem !important;
  height: 0.9rem !important;
  padding: 0 !important;
  border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0 !important;            /* square */
  background: #fff !important;
  line-height: 1 !important;
}

/* Breathing space between to-dos (right-rail quick list) */
#todoQuickList .rail-list .rail-item {
  margin-bottom: 10px !important;   /* line space between entries */
}
#todoQuickList .rail-list .rail-item:last-child {
  margin-bottom: 0 !important;      /* no extra gap after the last item */
}

/* Breathing space on the full To-Do list as well */
.todo-list .todo-item {
  margin-bottom: 10px !important;
}
.todo-list .todo-item:last-child {
  margin-bottom: 0 !important;
}