/* Minimal custom overrides on top of Tailwind CDN utilities. */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Improve default autofill readability in dark mode. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #e2e8f0;
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Ensure dialog modals fill their max-width and have proper dark backdrop. */
dialog {
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
dialog[open] {
  display: flex;
  flex-direction: column;
}

/* Smooth transitions for interactive elements. */
button, a, input, select, textarea {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus ring for keyboard accessibility. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Panel shadow utility used by cards. */
.shadow-panel {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
}

/* Subtle dark scrollbars for board/list usability on desktop/tablet. */
*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: #0f172a;
}

*::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
  border: 2px solid #0f172a;
}

/* Details/summary dropdown menus in nav. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Close details dropdowns when clicking elsewhere. */
details[open] > summary::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 30;
  cursor: default;
}