/* Small extras that Tailwind's CDN build doesn't cover. Colours are the `brand` palette of the layout. */

/* The hidden attribute must win over utility classes such as grid or inline-flex, which set display themselves
 * (the notification count and the "Clear filters" button rely on it). */
[hidden] { display: none !important; }

/* Highlight selected messages. */
.msg-row:has(.msg-check:checked) .bubble {
  border-color: #a7bccf; /* brand-300 */
  background-color: #f4f7fa; /* brand-50 */
}
.msg-row:has(.msg-check:focus-visible) .bubble {
  box-shadow: 0 0 0 2px #5d7a98; /* brand-500 */
}

/* Newly arrived message flash. */
@keyframes msg-flash {
  from { box-shadow: 0 0 0 3px rgba(93, 122, 152, 0.55); }
  to   { box-shadow: 0 0 0 3px rgba(93, 122, 152, 0); }
}
.msg-fresh { animation: msg-flash 2.4s ease-out; }

/* Toasts. */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.toast-in { animation: toast-in 0.18s ease-out; }

/* Button spinner. */
.spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Board: columns scroll sideways inside their own container, never the page. */
.board-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.board-card { cursor: grab; }
.board-card:active { cursor: grabbing; }
.board-list { min-height: 3.5rem; }
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { box-shadow: 0 8px 20px rgba(46, 58, 73, 0.18); }

@media (prefers-reduced-motion: reduce) {
  .msg-fresh, .toast-in { animation: none; }
  .spinner { animation-duration: 2s; }
}

/* App shell. #shell.has-sidebar (signed-in pages only) is pushed right by the sidebar (13rem) from lg up; below that the sidebar is a drawer.
 * The menu button (shell.js) opens the drawer, or on wide screens collapses the sidebar (html.nav-collapsed). */
#sidebar { transition: transform 0.2s ease, visibility 0.2s; }
@media (min-width: 1024px) {
  #shell.has-sidebar { padding-left: 13rem; transition: padding-left 0.2s ease; }
  html.nav-collapsed #shell.has-sidebar { padding-left: 0; }
  html.nav-collapsed #sidebar { transform: translateX(-100%); visibility: hidden; } /* hidden = out of the tab order */
}
@media (max-width: 1023.98px) {
  #sidebar { transform: translateX(-100%); visibility: hidden; }
  body.nav-open #sidebar { transform: none; visibility: visible; }
  body.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar, #shell.has-sidebar { transition: none; }
}