/* Minimal extra styles, Tailwind used for layout */
#toast > .toast-item{ animation: slide-in 240ms ease forwards; margin-bottom:0.5rem; }
@keyframes slide-in{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity:1; transform: translateY(0); } }

/* small screens adjustments */
@media (max-width: 480px){
  main { padding: 1rem; }
}

/* dark theme niceties */
.toast-item{ min-width: 220px; max-width: 380px; }

/* preview list spacing */
#previewList > li + li{ margin-top: 0.5rem; }

/* hide developer-only fields */
.dev-only{ display:none; }

/* Categories list: constrain height and enable scrolling (mobile friendly) */
#categoryList {
  max-height: 40vh; /* limit to a portion of the viewport */
  min-height: 6rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
  padding-right: 0.25rem; /* accommodation for scrollbar */
}

/* On very small screens, reduce max height to keep create form visible */
@media (max-width: 480px){
  #categoryList { max-height: 30vh; }
}

/* When the aside grows taller, ensure list doesn't push the footer off-screen */
@media (min-width: 1024px){
  #categoryList { max-height: calc(100vh - 220px); }
}

/* Mobile selected category visual */
#categoryList > li.selected-cat{
  outline: 2px solid rgba(99,102,241,0.25);
  background: linear-gradient(90deg, rgba(79,70,229,0.12), rgba(99,102,241,0.04));
}

/* Visual style for categories used as active filters */
#categoryList > li.filtered-cat{
  border-color: rgba(99,102,241,0.6);
  background: linear-gradient(90deg, rgba(79,70,229,0.16), rgba(99,102,241,0.06));
  outline: 2px solid rgba(79,70,229,0.06);
}

#categoryList > li{ touch-action: manipulation; }

/* Visual for the small check indicator inside category items */
#categoryList > li .sel-indicator{ display:inline-block; width:1.2rem; text-align:center; }

/* Drop target styles for notes when selection mode is active */
.drop-target-active{ border-color: rgba(99,102,241,0.4); box-shadow: 0 4px 18px rgba(99,102,241,0.06); }
.drop-target{ display:block; border:1px dashed rgba(148,163,184,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:0.5rem; border-radius:6px; text-align:center; }
.drop-target:hover{ background: rgba(255,255,255,0.02); }

/* Make drop-target text slightly prominent on mobile */
@media (max-width: 768px){
  .drop-target{ font-weight:600; }
}

/* category toggle rotation */
#categoryToggle { transition: transform 180ms ease; }
#categoryToggle.rotated { transform: rotate(180deg); }
#categoryBody { transition: max-height 220ms ease; }

/* Inline field error animation */
.field-error{
  display: none;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
}
.field-error.show{
  display: block;
  opacity:1;
  transform:translateY(0);
}

/* Eye toggle inside inputs */
.input-with-eye{ position:relative; }
.input-with-eye input{ padding-right:2.75rem; }
.eye-button{ position:absolute; right:0.5rem; top:50%; transform:translateY(-50%); background:transparent; border:none; color:rgba(229,231,235,0.9); padding:0.25rem; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.eye-button:focus{ outline:2px solid rgba(99,102,241,0.3); border-radius:6px; }
.eye-button svg{ width:1.25rem; height:1.25rem; }

/* Toast fade-out */
.toast-item.fade-out{ opacity:0; transform:translateY(-6px); transition:opacity .22s ease, transform .22s ease; }

/* Add a little inner padding for form controls to improve touch/click targets */
input[type="text"], input[type="password"], input[type="email"], textarea, select, .input-with-eye input {
  padding: 0 0.75rem; /* 8px vertical, 12px horizontal */
}

#removeFiltersBtn{ cursor:pointer; }
#removeFiltersBtn:active{ transform: translateY(1px); }