/* Breizhkemp — small layer on top of Bootstrap 5. */
/* Always show the vertical scrollbar, so pages don't shift sideways when their height changes. */
html { overflow-y: scroll; }

/* Avatars: {% avatar user "xs|sm|md|lg|xl" %} */
.avatar {
  --avatar-size: 24px;
  width: var(--avatar-size); height: var(--avatar-size);
  border-radius: 50%; object-fit: cover; flex-shrink: 0; vertical-align: middle;
}
.avatar-xs { --avatar-size: 20px; }
.avatar-sm { --avatar-size: 24px; }
.avatar-md { --avatar-size: 28px; }
.avatar-lg { --avatar-size: 36px; }
.avatar-xl { --avatar-size: 56px; }
.avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(var(--avatar-size) * .4); line-height: 1; font-weight: 600;
  background: var(--bs-secondary-bg); color: var(--bs-emphasis-color);
}
/* Same header height on every project tab (with or without action buttons): no layout shift. */
.project-header-bar { min-height: 2.5rem; }
/* Page actions (Nouvelle liste…) sit below the project tabs, right-aligned. */
.project-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-bottom: 1rem; }
.project-badge { font-size: .75rem; font-weight: 600; vertical-align: middle; }
.project-header-bar .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .875rem; }
.project-dot {
  display: inline-block; width: .75rem; height: .75rem; border-radius: 50%;
  background: var(--project-color, var(--bs-primary)); margin-right: .5rem; vertical-align: middle;
}
.markdown-body img { max-width: 100%; height: auto; border-radius: .25rem; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body blockquote { border-left: 3px solid var(--bs-border-color); padding-left: 1rem; color: var(--bs-secondary-color); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }

/* Brand images (static/img/). They are black on a white rounded tile. */
/* Top navbar: no vertical padding, the brand icon fills its whole height. */
.navbar-main { --bk-navbar-height: 3rem; }
.navbar-main .navbar-brand { padding-top: 0; padding-bottom: 0; }
.navbar-main > .container-xl { min-height: var(--bk-navbar-height); }
.brand-icon { display: block; height: var(--bk-navbar-height); width: auto; flex-shrink: 0; }
.login-logo, .empty-logo { max-width: 100%; height: auto; opacity: .95; }
.empty-logo { opacity: .6; }

/* User colours (User.color): light backgrounds, always with dark text so it stays readable
   in light and dark theme. Keep in sync with accounts.models.USER_COLORS (a test checks it). */
.user-color-rose { --user-color: #ffd6d6; }
.user-color-peach { --user-color: #ffe0c2; }
.user-color-butter { --user-color: #fff1b8; }
.user-color-lime { --user-color: #e4f5c4; }
.user-color-mint { --user-color: #c9f0d6; }
.user-color-aqua { --user-color: #c6ece8; }
.user-color-sky { --user-color: #cfe8ff; }
.user-color-periwinkle { --user-color: #d6dcff; }
.user-color-lavender { --user-color: #e6d6ff; }
.user-color-pink { --user-color: #f8d4f0; }
.user-color-sand { --user-color: #f3e3d3; }
.user-color-slate { --user-color: #e2e8f0; }
.avatar-initials[class*="user-color-"], .ts-avatar-initials[class*="user-color-"], .user-chip {
  background: var(--user-color); color: #212529;
}
/* {% user_chip user %}: pseudo on the user's colour (to-do lists). */
.user-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .55rem; border-radius: 1rem; white-space: nowrap;
  font-size: .8rem; font-weight: 500; line-height: 1.35;
}
.user-chip .avatar { margin-left: -.35rem; }
.ts-wrapper.multi .ts-control > .item.user-chip { border-color: transparent; border-radius: 1rem; padding-right: .15rem; }

/* Colour picker (profile) */
.color-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.color-swatch {
  width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer;
  background: var(--user-color); border: 1px solid var(--bs-border-color);
}
.color-swatch:has(input:checked) { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
.color-swatch:has(input:focus-visible) { box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .35); }