/* reminders.css — layout only; aesthetic preserved */

/* ===== Composer (unchanged) ===== */
.rem-form{ margin-bottom:12px; }
.rem-grid{
  display:grid;
  grid-template-columns: 1fr auto auto; /* title | Not due | Add */
  gap:10px;
  align-items:center;
}
#rem-title{ width:100%; }
.rem-notes{ margin-top:10px; width:100%; }
#rem-due-btn{
  padding:8px 12px; border-radius:999px; border:1px solid var(--border);
  background:transparent; color:#cfe3ff;
}
#rem-due{ min-width:240px; }

/* ===== Filters (unchanged) ===== */
.rem-controls{
  display:flex; align-items:center; justify-content:space-between;
  margin:10px 0 12px;
}

/* ===== List container (unchanged) ===== */
.rem-list.card{ padding:0; }
.rem-list{ list-style:none; margin:0; padding:0; }
.rem-list .muted{ color:var(--muted); }

/* ===== Row: make it a single-line flex strip ===== */
.rem-list > li,
.rem-item{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  min-height:56px;
  padding:8px 16px;
  border-bottom:2px solid rgba(255,255,255,.18);
  box-sizing:border-box;
}
.rem-list > li:last-child,
.rem-item:last-child{ border-bottom:none; }

/* Checkbox */
.rem-check{ display:flex; align-items:center; justify-content:center; }
.rem-check input{ width:22px; height:22px; cursor:pointer; }

/* Title */
.rem-title,
.rem-list > li .title,
.rem-list > li strong{
  font-weight:800; font-size:22px; color:#e9f0ff; letter-spacing:.01em;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- Due pill smaller --- */
.rem-due,
.rem-list > li .due{
  flex:0 0 auto;
  padding:4px 10px;
  font-size:14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#d7e6ff;
  white-space:nowrap;
  min-width:auto;
}

/* >>> push Edit to far right <<< */
.rem-edit,
.rem-list > li .edit,
.rem-list > li [data-act="edit"]{
  margin-left:auto;
  flex:0 0 auto;
}

/* Delete sits next to Edit */
.rem-del,
.rem-list > li .delete,
.rem-list > li [data-act="del"],
.rem-list > li [data-act="delete"]{
  flex:0 0 auto;
}

/* --- Slimmer Edit/Delete --- */
.rem-edit,
.rem-del{
  padding:6px 12px;
  font-size:14px;
  min-width:unset;   /* no 110px lock */
}

.tiny{ min-width:110px; text-align:center; }
.danger{ border-color: rgba(255,120,120,.45); color:#ffd1d1; }

/* Done state */
.done .rem-title,
.rem-list > li.done .rem-title{ text-decoration:line-through; opacity:.7; }

/* ===== Modals ===== */
.remodal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); backdrop-filter: blur(8px); z-index:1000;
}
.remodal[hidden]{ display:none; }
.remodal-box{
  background: linear-gradient(180deg, rgba(12,18,28,.96), rgba(7,10,19,.96));
  border:1px solid var(--border); border-radius:18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  width:min(680px, calc(100vw - 32px));
  padding:20px;
}
.remodal-title{ font-size:24px; font-weight:800; color:#e9f0ff; margin-bottom:10px; }
.remodal-body .stack{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.remodal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }

.modal-mask{
  position:fixed; inset:0; z-index:1200; background:rgba(2,6,15,.55);
  backdrop-filter: blur(10px); display:flex; align-items:center; justify-content:center;
}
.modal-mask[hidden]{ display:none; }
.modal{
  width:min(680px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(12,18,28,.96), rgba(7,10,19,.96));
  border:1px solid var(--border); border-radius:18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  padding:22px;
}
.modal-title{ font-size:28px; font-weight:800; letter-spacing:.01em; color:#e9f0ff; }
.modal-body{ margin-top:16px; color:#cfe3ff; }
.modal-msg{ opacity:.9; }
.modal-actions{ margin-top:22px; display:flex; gap:12px; justify-content:flex-end; }
.modal-input, .modal-select{
  width:100%; box-sizing:border-box; background:var(--panel); color:var(--ink);
  border:1px solid var(--border); border-radius:12px; padding:12px 14px; outline:none;
}

/* Small screens */
@media (max-width: 720px){
  .rem-grid{ grid-template-columns: 1fr auto auto; }
  #rem-due{ min-width: 180px; }
  .rem-list > li, .rem-item{ gap:12px; min-height:52px; }
  .tiny{ min-width:96px; }
}