/* =========================================================
 *  NEAVE•OS — additional styling
 *  (Tailwind utility classes do most of the work; this file
 *   covers the reusable .control input and a few polish bits.)
 * ========================================================= */

/* Shared form control look — used by selects/inputs across pages */
.control {
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #d4d4d8;            /* zinc-300 */
  background-color: #ffffff;
  color: #18181b;                        /* zinc-900 */
  font-size: 0.95rem;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.control::placeholder { color: #a1a1aa; } /* zinc-400 */
.control:focus {
  border-color: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18);
}

/* Dark mode variants */
.dark .control {
  background-color: #1c1c1f;
  border-color: #2a2a2e;
  color: #f4f4f5;
}
.dark .control::placeholder { color: #71717a; }

/* Native select arrow tidy-up */
select.control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2371717a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}

/* Date input calendar icon colour in dark mode */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

/* Subtle entrance animation for modals */
.modal-overlay:not(.hidden) .modal-box {
  animation: neave-pop .18s ease-out;
}
@keyframes neave-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Slim scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c4c4c8 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c4c4c8; border-radius: 8px; }
.dark *::-webkit-scrollbar-thumb { background: #3f3f46; }