/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Pagy bootstrap pagination ────────────────────────────────────────────── */
.pagy-bootstrap.series-nav {
	display: flex;
	justify-content: center;
}

.pagy-bootstrap.series-nav ul.pagination {
	margin-bottom: 0;
}

/* ── Lead temperature color overrides ─────────────────────────────────────── */
.badge.bg-azure {
	background-color: #206bc4;
	color: #fff;
}

/* ── Table polish ─────────────────────────────────────────────────────────── */
.table-vcenter td,
.table-vcenter th {
	vertical-align: middle;
}

.table th a {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.card-table thead th {
	color: var(--tblr-secondary);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.card-table tbody tr:nth-child(odd) td {
	background: rgba(15, 23, 42, 0.015);
}

.card-table tbody tr:hover td {
	background: rgba(32, 107, 196, 0.04);
}

/* ── Liste des dossiers ───────────────────────────────────────────────────── */
/* The dossier list is the team's main working screen: from a 1100 px window
   the whole table must be readable at once. Nothing is pinned and nothing
   scrolls sideways; when room is short the cells wrap instead (name,
   intervention, long badges). Below that (tablet, phone) the table may scroll
   inside its card, never the page. */

/* Page title: in a narrow window its note wraps before the buttons beside it
   drop to a line of their own (on a phone the header is already a column). */
@media (min-width: 768px) {
	.dossiers-page-title {
		flex: 1 1 12rem;
		min-width: 0;
	}
}

/* Filters: a bar above the table, so the table keeps the full page width.
   Two rows of fields on a laptop; the buttons sit in the heading line rather
   than on a row of their own (they come last in the document and on a phone). */
.dossier-filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	padding: 0.625rem 0.75rem 0.75rem;
	background: #eef2f7;
	border-color: #b8c4d3;
}

.dossier-filters__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
}

.dossier-filters__hint {
	margin-left: auto;
	color: var(--tblr-secondary);
	font-size: 0.8125rem;
}

/* Bottom-aligned: a label that wraps grows upward and the fields stay in line. */
.dossier-filters__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	align-items: end;
}

.dossier-filters__field--wide {
	grid-column: span 2;
}

.dossier-filters__field .form-label {
	margin-bottom: 0.125rem;
	font-size: 0.75rem;
}

.dossier-filters__field .form-control,
.dossier-filters__field .form-select,
.dossier-filters__actions .btn {
	min-height: 0;
	padding-top: 0.3125rem;
	padding-bottom: 0.3125rem;
}

/* Narrow fields on a small laptop (six across): slightly smaller text and
   less padding, so that a chosen value such as « Diagnostic reçu » shows whole. */
.dossier-filters__field .form-control,
.dossier-filters__field .form-select {
	padding-left: 0.5rem;
	font-size: clamp(0.8125rem, 0.5882vw + 0.4081rem, 0.875rem);
}

.dossier-filters__field .form-control {
	padding-right: 0.5rem;
}

.dossier-filters__field .form-select {
	padding-right: 1.5rem;
	background-position: right 0.375rem center;
}

.dossier-filters__actions {
	display: flex;
	gap: 0.5rem;
}

.dossier-filters__actions .btn {
	flex: 1 1 auto;
}

@media (min-width: 576px) {
	.dossier-filters {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"head actions"
			"fields fields";
		align-items: center;
	}

	.dossier-filters__head {
		grid-area: head;
	}

	.dossier-filters__grid {
		grid-area: fields;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.dossier-filters__actions {
		grid-area: actions;
	}
}

/* With the side menu (from 992 px), six columns: the search field (two
   columns) and the ten others take exactly two rows. */
@media (min-width: 992px) {
	.dossier-filters__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Table. Text and cell padding follow the window: 13 px and 2 px in a 1100 px
   window (where the menu takes 240 px), 15 px and 8 px from 1440 px, 12 px of
   padding on a wide screen. The 2 px gap leaves room for wider fallback fonts
   even with a 17 px scrollbar and the admin selection column. */
.dossiers-table {
	--dossiers-cell-gap: clamp(0.125rem, 1.7647vw - 1.0882rem, 0.75rem);
	--tblr-table-border-color: #c3ccd8;
	font-size: clamp(0.8125rem, 0.5882vw + 0.4081rem, 0.9375rem);
}

/* Keep the light theme while separating the headings and adjacent dossiers.
   Only colours change: the table's measured widths and wrapping stay intact. */
.dossiers-table thead th {
	background: #e2e8f0;
	color: var(--tblr-body-color);
}

.dossiers-table tbody tr:nth-child(odd) td {
	background: #f1f5f9;
}

.dossiers-table tbody tr:hover td {
	background: #e8f0fa;
}

.dossiers-table > :not(caption) > * > * {
	padding: 0.5rem var(--dossiers-cell-gap);
}

.dossiers-table tr th:first-child,
.dossiers-table tr td:first-child {
	padding-left: clamp(0.5rem, 1.1765vw - 0.3088rem, 0.75rem);
}

.dossiers-table tr th:last-child,
.dossiers-table tr td:last-child {
	padding-right: clamp(0.5rem, 1.1765vw - 0.3088rem, 0.75rem);
}

/* « Dernier contact » may take two lines (« .table th a » keeps the sort
   links of other tables on one). */
.dossiers-table th a {
	display: inline;
	white-space: normal;
}

/* Sized by their content, never wrapped: the date on its two lines, the
   buttons. */
.dossiers-table__date,
.dossiers-table__actions {
	width: 1%;
	white-space: nowrap;
}

/* « Dossier CRM #… » and « Dossier legacy #… »: side by side or one per line,
   never cut in the middle. */
.dossiers-table__refs {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5rem;
	font-size: max(0.75rem, 0.857em);
}

.dossiers-table__refs > span {
	white-space: nowrap;
}

/* A long badge (« Synthèse patient à valider », « Intéressé pour plus tard »)
   takes two lines in a narrow column instead of widening the table. */
.dossiers-table .badge {
	padding-left: 0.4em;
	padding-right: 0.4em;
	font-size: max(0.72rem, 0.857em);
	line-height: 1.15;
	text-align: left;
	white-space: normal;
}

/* The status cell stacks up to two badges and the age marker: it is the first
   to get the room its longest badge needs on one line (« Synthèse patient à
   valider », 12.6em, plus the cell's own padding, which grows with the
   window), because every line it saves is a shorter row. */
.dossiers-table__status {
	width: calc(12.6em + 2 * var(--dossiers-cell-gap));
}

/* Keep the assigned surgeon inside the former temperature column. Full
   names use the same bounded wrapping as other freely entered text. */
@media (min-width: 1280px) {
	.dossiers-table__surgeon {
		width: 8.8em;
	}
}

/* « il y a environ 2 mois »: under the « Dernier contact » heading a small
   laptop shows « environ 2 mois » (last_contact_label). */
@media (max-width: 1279.98px) {
	.dossiers-table .last-contact__ago {
		display: none;
	}
}

/* Typed text (a patient's name, an intervention entered as a free line) never
   widens the table. The text may break anywhere, which takes it out of the
   column's minimum width; an invisible copy (::before, fed by data-text) puts
   back the width of its longest word, up to a cap. So an ordinary word is
   never cut, and a run longer than the cap (« Abdominoplastie+liposuccion »)
   breaks instead of pushing « Voir » out of the card. The caps are what the
   columns already hold: « Abdominoplastie », « Dossier legacy #900001 ». */
.dossiers-table__free-text {
	display: block;
	overflow-wrap: anywhere;
}

.dossiers-table__free-text::before {
	content: attr(data-text);
	display: block;
	height: 0;
	max-width: 8em;
	overflow: hidden;
	overflow-wrap: normal;
	visibility: hidden;
}

.dossiers-table__free-text--name::before {
	max-width: 10.5em;
}

/* Agent: first name and initial; on a wide screen the full name, first name
   above family name (the rows are two lines tall anyway). A name takes the
   room it needs up to a cap, where « Camille D. » still fits on one line: a
   longer one (a compound first name, or the full names that two agents with
   the same short form keep) wraps inside that width, and a word longer than
   the cap breaks. */
.dossiers-table__agent {
	width: 1%;
}

.dossiers-table__agent-short,
.dossiers-table__agent-full > span {
	display: block;
	width: max-content;
	overflow-wrap: break-word;
}

.dossiers-table__agent-short {
	max-width: 5em;
}

.dossiers-table__agent-full > span {
	max-width: 11em;
}

.dossiers-table__agent-full {
	display: none;
}

@media (min-width: 1536px) {
	.dossiers-table__agent-full {
		display: block;
	}

	.dossiers-table__agent-short {
		display: none;
	}
}

/* « Voir » and the action of the moment: side by side, on one line. */
.dossiers-table__buttons {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 0.25rem;
}

.dossiers-table__buttons .btn {
	padding-left: 0.375rem;
	padding-right: 0.375rem;
	font-size: 1em;
}

/* Below a laptop window (tablet, phone) the two buttons stack: the rows that
   carry an action are already three lines tall, and the table needs the width. */
@media (max-width: 1099.98px) {
	.dossiers-table__buttons {
		flex-direction: column;
	}
}

/* The assistant's round button floats over the bottom right corner of the
   window, exactly where « Voir » sits: leave room under the table to scroll
   its last row clear of the button. */
.dossiers-table-card {
	margin-bottom: 3.5rem;
	border-color: #b8c4d3;
}

/* ── Card compact header ──────────────────────────────────────────────────── */
.card-sm .card-body {
	padding: 0.75rem;
}

/* ── Typography overrides ─────────────────────────────────────────────────── */
.subheader {
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* ── Sidebar nav active state (Tabler overrides) ─────────────────────────── */
.navbar-vertical[data-bs-theme="light"] {
	--tblr-navbar-color: var(--tblr-body-color);
	--tblr-navbar-hover-color: var(--tblr-body-color);
	--tblr-navbar-active-color: var(--tblr-body-color);
}

.navbar-vertical .nav-link.active {
	background-color: rgba(32, 107, 196, 0.08);
	border-radius: 4px;
}

.navbar-vertical .nav-link .nav-link-chevron {
	transition: transform 0.2s ease;
}

.navbar-vertical .nav-link[aria-expanded="true"] .nav-link-chevron {
	transform: rotate(180deg);
}

/* The open settings list outgrows a small laptop screen: the menu scrolls on
   its own, and the last entry must clear the bottom edge instead of sitting
   flush against it. */
@media (min-width: 992px) {
	.navbar-vertical.navbar-expand-lg .navbar-collapse {
		padding-bottom: 3rem;
	}
}

.navbar-subnav .nav-link {
	margin-left: 1.5rem;
	padding-left: 0.75rem;
	font-size: 0.95rem;
}

.navbar-vertical .navbar-nav .nav-link .badge {
	position: static !important;
	transform: none !important;
}

/* ── Empty-state icons ────────────────────────────────────────────────────── */
.ti.fs-1 {
	font-size: 2rem !important;
}

.ti.fs-2 {
	font-size: 1.5rem !important;
}

/* ── Performance Fixes for Firefox (Linux/macOS) ──────────────────────────── */
/* backdrop-filter was previously disabled during debugging, now restored
   for a premium glassmorphic feel where supported. */
.navbar,
.modal,
.offcanvas,
.dropdown-menu,
.glass {
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* Smooth transitions for progress bars */
.progress-bar {
	transition: width 0.6s ease;
}

/* ── Dossier tabs (prominence) ────────────────────────────────────────────── */
#dossierTabs {
	background: #eef2f7;
	border-radius: 6px 6px 0 0;
	padding: 0.25rem 0.5rem 0;
	border-bottom: 2px solid var(--tblr-primary);
}

#dossierTabs .nav-link {
	font-weight: 500;
	color: #475569;
	border-color: transparent;
}

#dossierTabs .nav-link:hover {
	color: var(--tblr-primary);
	background: rgba(32, 107, 196, 0.06);
}

#dossierTabs .nav-link.active {
	background: #fff;
	color: var(--tblr-primary);
	font-weight: 600;
	border-color: #dee2e6 #dee2e6 #fff;
	border-bottom-width: 3px;
}

/* ── Consultation stepper ─────────────────────────────────────────────────── */
.stepper-circle {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 600;
	border: 2px solid var(--tblr-border-color);
	color: var(--tblr-secondary);
	background: #fff;
	transition: all 0.2s ease;
}

.stepper-label {
	font-size: 0.65rem;
	color: var(--tblr-secondary);
	max-width: 72px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stepper-connector {
	height: 2px;
	background: var(--tblr-border-color);
	min-width: 12px;
	transition: background 0.2s ease;
}

.stepper-connector--completed {
	background: var(--tblr-success);
}

.stepper-step--completed .stepper-circle {
	background: var(--tblr-success);
	border-color: var(--tblr-success);
	color: #fff;
}

.stepper-step--completed .stepper-label {
	color: var(--tblr-success);
}

.stepper-step--current .stepper-circle {
	background: var(--tblr-primary);
	border-color: var(--tblr-primary);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.2);
}

.stepper-step--current .stepper-label {
	color: var(--tblr-primary);
	font-weight: 600;
}

.stepper-step--upcoming .stepper-circle {
	opacity: 0.5;
}

.stepper-step--upcoming .stepper-label {
	opacity: 0.5;
}

/* ── Patient portal ──────────────────────────────────────────────────────────── */
/* The portal's theme lives in portal.css (loaded only by layouts/portal.html.erb).
   Only rules shared with the admin layout stay here: the chat bubbles below are
   reused by the admin dossier messages tab, and .messagerie-thread--unread by
   the admin messagerie. */

/* ── Chat bubbles ─────────────────────────────────────────────────────────────── */

.portal-chat {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.portal-chat__bubble-row {
	display: flex;
}

.portal-chat__bubble-row--patient {
	justify-content: flex-end;
}

.portal-chat__bubble-row--team {
	justify-content: flex-start;
}

.portal-chat__bubble {
	max-width: 78%;
	padding: .625rem .875rem;
	border-radius: 1rem;
	font-size: .9rem;
}

.portal-chat__bubble-row--focused .portal-chat__bubble {
	outline: 2px solid #206bc4;
	outline-offset: 2px;
}

.portal-chat__bubble-row--patient .portal-chat__bubble {
	background-color: #1a2942;
	color: #fff;
	border-bottom-right-radius: .25rem;
}

.portal-chat__bubble-row--team .portal-chat__bubble {
	background-color: #fff;
	border: 1px solid #e0e5ef;
	border-bottom-left-radius: .25rem;
}

.portal-chat__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .5rem;
	margin-bottom: .2rem;
	font-size: .75rem;
}

/* Admin dossier messages tab: adds an avatar chip to the meta row, which
   doesn't suit the portal's baseline text alignment. */
.portal-chat__meta--with-avatar {
	align-items: center;
}

.portal-chat__bubble-row--patient .portal-chat__meta {
	color: rgba(255, 255, 255, .65);
}

.portal-chat__bubble-row--team .portal-chat__meta {
	color: #6c757d;
}

.portal-chat__sender {
	font-weight: 600;
}

.portal-chat__role {
	font-weight: 400;
}

.portal-chat__time {
	white-space: nowrap;
}

.portal-chat__body p {
	margin-bottom: 0;
}

.portal-chat__attachment {
	display: inline-flex;
	align-items: center;
	font-size: .8rem;
	text-decoration: none;
}

.portal-chat__bubble-row--patient .portal-chat__attachment {
	color: rgba(255, 255, 255, .8);
}

.portal-chat__bubble-row--team .portal-chat__attachment {
	color: #1a2942;
}

/* ── Global search dialog ────────────────────────────────────────────────── */

dialog.global-search {
	width: 100%;
	max-width: 600px;
	border: none;
	border-radius: .75rem;
	padding: 0;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .18), 0 4px 16px rgba(0, 0, 0, .1);
	position: fixed;
	top: 15vh;
	margin: 0 auto;
	left: 0;
	right: 0;
}

dialog.global-search::backdrop {
	background: rgba(0, 0, 0, .45);
	backdrop-filter: blur(2px);
}

.global-search__inner {
	display: flex;
	flex-direction: column;
	max-height: 70vh;
}

.global-search__input-row {
	display: flex;
	align-items: center;
	padding: .75rem 1rem;
	border-bottom: 1px solid #e8ecf0;
	gap: .5rem;
}

.global-search__input-icon {
	font-size: 1.1rem;
	color: #6c7a94;
	flex-shrink: 0;
}

.global-search__input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 1rem;
	background: transparent;
	color: #1a2942;
}

.global-search__input::placeholder {
	color: #adb5bd;
}

.global-search__esc-hint {
	font-size: .7rem;
	color: #adb5bd;
	border: 1px solid #dee2e6;
	border-radius: .25rem;
	padding: .1rem .35rem;
	flex-shrink: 0;
}

.global-search__results {
	overflow-y: auto;
	flex: 1;
}

.global-search__syntax {
	padding: .4rem 1rem;
	border-bottom: 1px solid #eef1f4;
	background: #f8f9fa;
	color: #6c7a94;
	font-size: .72rem;
}

.global-search__syntax code {
	color: #1a2942;
}

.global-search__notice {
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	margin: 0;
	padding: .55rem 1rem;
	border-bottom: 1px solid #cfe2ff;
	background: #e7f1ff;
	color: #315b8a;
	font-size: .78rem;
}

.global-search__empty {
	text-align: center;
	color: #6c7a94;
	padding: 1.5rem 1rem;
	margin: 0;
}

.global-search__group-label {
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #6c7a94;
	padding: .6rem 1rem .3rem;
}

.global-search__item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .55rem 1rem;
	text-decoration: none;
	color: inherit;
	transition: background .1s;
}

.global-search__item:hover,
.global-search__item--active {
	background: #f1f5fb;
	color: inherit;
	text-decoration: none;
}

.global-search__more {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
	font: inherit;
	color: #206bc4;
	cursor: pointer;
}

.global-search__more:disabled {
	opacity: .65;
	cursor: wait;
}

.global-search__item-icon {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: .375rem;
	background: #e8ecf0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .9rem;
	color: #6c7a94;
	flex-shrink: 0;
}

.global-search__item-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.global-search__item-title {
	font-weight: 600;
	font-size: .9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.global-search__item-sub {
	font-size: .78rem;
	color: #6c7a94;
	display: flex;
	align-items: center;
	gap: .25rem;
	margin-top: .1rem;
}

.global-search__item-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .1rem;
	font-size: .78rem;
	color: #adb5bd;
	white-space: nowrap;
	flex-shrink: 0;
}

.global-search__identifier--matched {
	color: #206bc4;
	font-weight: 600;
}

.global-search__footer {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .5rem 1rem;
	border-top: 1px solid #e8ecf0;
	font-size: .75rem;
	color: #adb5bd;
}

.global-search__footer kbd {
	font-size: .7rem;
	border: 1px solid #dee2e6;
	border-radius: .2rem;
	padding: .1rem .3rem;
	color: #6c7a94;
	background: #f8f9fa;
}
/* ── UX pass 2026-07-06 (walkthrough batch 1) ────────────────────────────────── */

/* Solid-background badges: Tabler keeps dark text unless told otherwise —
   the count inside "badge bg-primary" was unreadable. */
.badge.bg-primary, .badge.bg-secondary, .badge.bg-success, .badge.bg-danger,
.badge.bg-info, .badge.bg-dark, .badge.bg-azure, .badge.bg-indigo,
.badge.bg-purple, .badge.bg-teal, .badge.bg-orange, .badge.bg-red,
.badge.bg-green, .badge.bg-blue, .badge.bg-cyan {
	color: #fff;
}
.badge.bg-warning, .badge.bg-yellow {
	color: #24292f;
}

/* Users are on laptops/phones and mostly 50+: slightly larger base text, and
   btn-sm was too thin to hit comfortably. */
body {
	font-size: .9375rem;
}
.btn-sm {
	padding: .375rem .75rem;
	font-size: .875rem;
}

/* Rails' button_to renders a <form>, which defaults to display:block and
   breaks inline alignment with adjacent <a class="btn"> actions in table
   cells (edit link + archive/reactivate button wrap to their own line). */
.button_to {
	display: inline-block;
	vertical-align: middle;
}

/* Notification bell count: pinned inside the link's own top-right corner
   (never into the neighboring element — wide counts grow leftward). */
.notification-count-badge {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .3rem;
	border-radius: 10rem;
	font-size: .7rem;
	font-weight: 600;
	line-height: 1;
	z-index: 1;
}

/* Tabler's `.navbar-nav .nav-link .badge` rule outranks the base rule above
   for the admin topbar bell (higher specificity), so its top/right/transform
   still hang the badge over the icon's corner into the username next to it.
   Force our flush corner position back for that specific context. */
.navbar-nav .nav-link .badge.notification-count-badge {
	top: 0;
	right: 0;
	transform: none;
}

/* Message threads (dossier, WhatsApp, e-mails, portail patient): bounded and
   parked on the newest message by messages_scroll_controller.js, instead of
   growing the whole page and burying whatever follows under a long thread. */
.chat-scrollbox {
	max-height: min(480px, 60vh);
	overflow-y: auto;
}

/* Unread notifications and threads share the team's requested red cue. */
.notification--unread,
.messagerie-thread--unread:not(.team-directory__row--active) {
	background-color: #fff1f2;
	box-shadow: inset 3px 0 0 #d63939;
}
.messagerie-thread--unread:not(.team-directory__row--active):hover {
	background-color: #ffe5e7;
}

/* ── Espaces de messagerie (D-123) ───────────────────────────────────────────
   Trois espaces, trois apparences fixes, jamais mélangées :
     Patiente   — ambre (ti-user-heart) : elle lit ce qui s'y écrit ;
     Chirurgien — azur  (ti-stethoscope) ;
     Équipe     — vert  (ti-users-group) : commerciales et administrateurs.
   Chaque carte d'espace porte une bordure gauche de 4px à sa couleur. */
:root {
	--space-patient: #f59f00;
	--space-patient-bg: #fff8e6;
	--space-surgeon: #4299e1;
	--space-surgeon-bg: #edf5fd;
	--space-team: #2fb344;
	--space-team-bg: #edf8ef;
}

.space-card { border-left: 4px solid var(--space-color, var(--tblr-border-color)); }
.space-card--patient { --space-color: var(--space-patient); }
.space-card--surgeon { --space-color: var(--space-surgeon); }
.space-card--team    { --space-color: var(--space-team); }

.space-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	font-size: 1rem;
}
.space-badge--patient { background: var(--space-patient-bg); color: var(--space-patient); }
.space-badge--surgeon { background: var(--space-surgeon-bg); color: var(--space-surgeon); }
.space-badge--team    { background: var(--space-team-bg); color: var(--space-team); }

.space-pill {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .1rem .5rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
}
.space-pill--patient { background: var(--space-patient-bg); color: #b36b00; }
.space-pill--surgeon { background: var(--space-surgeon-bg); color: #1f6fb8; }
.space-pill--team    { background: var(--space-team-bg); color: #1e7d2f; }

/* Onglets du dossier : l'icône porte la couleur de l'espace, et l'onglet
   actif est souligné de cette couleur. */
.space-tab--patient .ti { color: var(--space-patient); }
.space-tab--surgeon .ti { color: var(--space-surgeon); }
.space-tab--team .ti    { color: var(--space-team); }
.nav-tabs .space-tab--patient.active { border-bottom-color: var(--space-patient); }
.nav-tabs .space-tab--surgeon.active { border-bottom-color: var(--space-surgeon); }
.nav-tabs .space-tab--team.active    { border-bottom-color: var(--space-team); }

/* Declutter (R3) : la légende des pastilles, repliée derrière (?) au bout de
   la barre d'une commerciale, revient à la ligne dans son menu. */
.dossier-tabs-legend {
	width: 22rem;
	max-width: calc(100vw - 2rem);
	white-space: normal;
}

/* Bulles d'équipe : même gabarit que les fils du dossier, filet vert. */
.team-chat .team-chat__bubble {
	border-left: 3px solid var(--space-team);
}

/* Tabler n'a pas cet utilitaire : sans lui, un aperçu long empêchait la
   colonne de se réduire et poussait la pastille et l'heure hors de la carte
   (listes « Équipe » et « Messagerie »). */
.min-w-0 { min-width: 0; }

.team-directory__row--active {
	background-color: var(--space-team-bg);
	box-shadow: inset 3px 0 0 var(--space-team);
}

.team-legacy-internal summary {
	cursor: pointer;
}

/* ── Impression (feuille de route chauffeur) ─────────────────────────────────
   Une page A4 propre : navigation masquée, contenu pleine largeur, un jour ne
   se coupe jamais entre deux pages. */
@media print {
  .navbar-vertical,
  .navbar,
  .d-print-none { display: none !important; }
  .page-wrapper { margin-left: 0 !important; }
  .page-body { padding: 0 !important; }
  body { background: #fff !important; }
  .transfer-day { break-inside: avoid; }
  .transfer-day .card-header { background: #f5f5f5 !important; -webkit-print-color-adjust: exact; }
}

/* ── Carte d'affluence portail (D-61) ───────────────────────────────────────
   Barres en paliers discrets : l'intensité se lit, elle ne se mesure pas.
   Aucune largeur proportionnelle ici — une largeur en % permettrait de
   retrouver les effectifs absolus (docs/17 §1.2). Le nombre de segments
   allumés vient d'un niveau 0..3 calculé côté serveur. */
.affluence-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 8rem;
  align-items: center;
  gap: .75rem;
  padding: .35rem 0;
}
.affluence-label { font-weight: 500; }
.affluence-track { display: flex; gap: .25rem; }
.affluence-step {
  flex: 1;
  height: .75rem;
  border-radius: 2px;
  background-color: #e6e7e9;
}
.affluence-step.is-filled { background-color: #206bc4; }
.affluence-legend { font-size: .8125rem; }

@media (max-width: 575.98px) {
  .affluence-row { grid-template-columns: 5rem 1fr; }
  .affluence-legend { grid-column: 2; font-size: .75rem; }
}

/* ── Checklist pré-op : grands contrôles tactiles, lecture en une colonne ─ */
.preop-checklist-summary__icon {
  align-items: center;
  display: flex;
  font-size: 2rem;
  justify-content: center;
  min-width: 2.5rem;
}

.preop-checks {
  display: grid;
  gap: 1rem;
}

.preop-check {
  align-items: flex-start;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  display: flex;
  gap: .75rem;
  margin: 0;
  min-height: 3.25rem;
  padding: .75rem;
}

.preop-check .form-check-input {
  flex: 0 0 auto;
  height: 1.35rem;
  margin: .1rem 0 0;
  width: 1.35rem;
}

.preop-check .form-check-label {
  display: grid;
  gap: .15rem;
}

.preop-check .form-check-label small {
  color: var(--tblr-secondary);
}

.preop-step {
  align-items: center;
  background: var(--tblr-primary);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  height: 1.75rem;
  justify-content: center;
  margin-right: .5rem;
  width: 1.75rem;
}

.preop-current-value {
  background: var(--tblr-bg-surface-secondary, #f6f8fb);
  border-radius: .5rem;
  display: grid;
  gap: .15rem;
  padding: .75rem;
}

.preop-current-value span {
  color: var(--tblr-secondary);
  font-size: .75rem;
}

.preop-save-bar {
  align-items: center;
  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  display: flex;
  justify-content: space-between;
  padding: .75rem;
}

@media (max-width: 767.98px) {
  .preop-checklist-summary__action,
  .preop-checklist-summary__action .btn {
    width: 100%;
  }

  .preop-save-bar {
    bottom: .5rem;
    box-shadow: 0 -.25rem 1rem rgba(15, 23, 42, .12);
    position: sticky;
    z-index: 10;
  }

  .preop-save-bar .btn {
    min-height: 3rem;
    width: 100%;
  }
}

/* ── Assistant interne du personnel ─────────────────────────────────────── */
/* Bottom-right, where chat windows usually sit (Leïth, 27/09); the panel
   opens upward and leftward from that corner and can be resized from its
   top-left grip (size in px set by staff_assistant_controller). */
.staff-assistant {
  bottom: 1rem;
  position: fixed;
  right: 1rem;
  z-index: 1080;
}

.staff-assistant__launcher {
  border-radius: 999px;
  box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .22);
  height: 3rem;
  width: 3rem;
}

.staff-assistant__launcher .ti { font-size: 1.35rem; }

.staff-assistant__panel {
  bottom: 3.65rem;
  box-shadow: 0 .75rem 2.5rem rgba(15, 23, 42, .25);
  max-height: min(720px, calc(100vh - 6rem));
  position: absolute;
  right: 0;
  width: min(390px, calc(100vw - 2rem));
}

.staff-assistant__panel--sized { max-height: none; }

.staff-assistant__grip {
  cursor: nwse-resize;
  height: 1.5rem;
  left: 0;
  position: absolute;
  top: 0;
  touch-action: none;
  width: 1.5rem;
  z-index: 2;
}

.staff-assistant__grip::before {
  border-left: 2px solid var(--tblr-secondary);
  border-top: 2px solid var(--tblr-secondary);
  border-top-left-radius: .2rem;
  content: "";
  height: .55rem;
  left: .3rem;
  opacity: .55;
  position: absolute;
  top: .3rem;
  width: .55rem;
}

.staff-assistant__grip:hover::before,
.staff-assistant--resizing .staff-assistant__grip::before { opacity: 1; }
.staff-assistant--resizing { user-select: none; }

@media (pointer: coarse) {
  .staff-assistant__grip { height: 2.25rem; width: 2.25rem; }
}

.staff-assistant__header {
  align-items: stretch;
  flex-direction: column;
}

.staff-assistant__header-action {
  font-size: .75rem;
  line-height: 1.2;
  padding: .2rem .45rem;
}

.staff-assistant__history {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 180px;
  overflow-y: auto;
}

.staff-assistant__panel:not(.staff-assistant__panel--history) .staff-assistant__history,
.staff-assistant__panel--history #staff_assistant_messages,
.staff-assistant__panel--history .staff-assistant__composer { display: none; }

.staff-assistant__history .staff-assistant__messages { flex: 1 0 auto; overflow-y: visible; }

.staff-assistant__history-bar {
  align-items: center;
  border-bottom: 1px solid var(--tblr-border-color);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: space-between;
  padding: .5rem .75rem;
}

.staff-assistant__thread:hover { background: var(--tblr-bg-surface-secondary, #f6f8fb); }

.staff-assistant__messages {
  background: #f6f8fb;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .65rem;
  min-height: 180px;
  overflow-y: auto;
  padding: .75rem;
}

.staff-assistant__message {
  align-self: flex-start;
  max-width: 88%;
}

.staff-assistant__message--user { align-self: flex-end; }
.staff-assistant__message--tool { align-self: stretch; max-width: 100%; }
.staff-assistant__message--tool .staff-assistant__message-body {
  background: var(--tblr-info-lt, #e9f3fb);
  border-left: 3px solid var(--tblr-info, #4299e1);
}

.staff-assistant__message-label,
.staff-assistant__message-time {
  color: var(--tblr-secondary);
  display: block;
  font-size: .7rem;
  margin: 0 .35rem .15rem;
}

.staff-assistant__message-time { margin-top: .15rem; }

.staff-assistant__message--user .staff-assistant__message-label,
.staff-assistant__message--user .staff-assistant__message-time { text-align: right; }

.staff-assistant__message-body {
  background: #fff;
  border: 1px solid var(--tblr-border-color);
  border-radius: .85rem;
  overflow-wrap: anywhere;
  padding: .6rem .75rem;
}

.staff-assistant__message--user .staff-assistant__message-body {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: #fff;
}

.staff-assistant__message-body > div > :last-child { margin-bottom: 0; }

.staff-assistant__message-image,
.staff-assistant__preview img {
  border-radius: .4rem;
  display: block;
  height: auto;
  max-height: 220px;
  max-width: 100%;
  object-fit: contain;
}

.staff-assistant__message-image { margin-bottom: .5rem; }
.staff-assistant__capture-note { font-size: .75rem; margin-top: .35rem; opacity: .85; }
.staff-assistant__composer { background: #fff; }

@media (max-width: 575.98px) {
  .staff-assistant { bottom: .75rem; right: .75rem; }
  .staff-assistant__panel {
    bottom: 3.5rem;
    max-height: calc(100vh - 5rem);
    width: calc(100vw - 1.5rem);
  }
}

/* ── Afficher / masquer le mot de passe ─────────────────────────────────── */
/* PasswordVisibilityHelper + password_visibility_controller.js, on every
   screen where someone types a password (staff login, invitation, resets,
   patient portal, admin user forms); portal.css recolours it. The button sits
   inside the field's right edge, so the surrounding layout never moves. */
.password-field {
	position: relative;
}

.password-field .form-control {
	/* Tabler makes any .form-control carrying a `size` attribute intrinsic-width,
	   and Rails mirrors maxlength onto password fields as size. */
	width: 100%;
	padding-right: 7rem;
}

.password-field__toggle {
	position: absolute;
	top: 50%;
	right: 0.35rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 2rem;
	padding: 0.25rem 0.6rem;
	transform: translateY(-50%);
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #475569;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
}

/* Shipped `hidden` until the controller connects; display above would win. */
.password-field__toggle[hidden] {
	display: none;
}

/* « Afficher » and « Masquer » differ in width: keep the button still. */
.password-field__toggle {
	min-width: 6.5rem;
	justify-content: center;
}

/* Edge draws its own reveal eye inside password fields: one button is enough. */
.password-field input::-ms-reveal {
	display: none;
}

.password-field__toggle:hover {
	background: rgba(15, 23, 42, 0.06);
}

.password-field__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.password-field__icon {
	flex: none;
}

.password-field__toggle[aria-pressed="true"] .password-field__icon--show,
.password-field__toggle[aria-pressed="false"] .password-field__icon--hide {
	display: none;
}

/* Ticket 66 — dépôt de plusieurs photos/vidéos (media-dropzone). */
.media-dropzone {
	border: 1.5px dashed rgba(98, 105, 118, 0.4);
	border-radius: 6px;
	padding: 0.75rem;
	transition: border-color 0.15s, background-color 0.15s;
}

.media-dropzone--over {
	border-color: var(--tblr-primary, #206bc4);
	background-color: rgba(32, 107, 196, 0.06);
}

.media-dropzone__drop {
	color: var(--tblr-secondary, #667382);
}

.media-dropzone__item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.35rem 0;
	border-top: 1px solid rgba(98, 105, 118, 0.12);
}

.media-dropzone__icon {
	flex: none;
	margin-top: 0.15rem;
}

.media-dropzone__body {
	flex: 1;
	min-width: 0;
}

.media-dropzone__name {
	display: block;
	overflow-wrap: anywhere;
	font-weight: 500;
}