/* BCA Pointage — écrans de l'espace salariés (pensés d'abord pour le téléphone). */
.bcap { --bcap-accent: var(--accent, #1C7F8E); --bcap-ink: var(--ink, #152033); --bcap-muted: var(--muted, #56627A); --bcap-line: var(--line, #DCE1E6); display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; container-type: inline-size; }
.prose .bcap > * + * { margin-top: 0; }
.bcap__title { font-size: 30px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.bcap__title--history { margin-top: 24px !important; }
.bcap-notice { padding: 12px 16px; border-radius: 4px; font-weight: 500; }
.bcap-notice p { margin: 0; }
.bcap-notice--ok { background: #E3F4EA; color: #1C5B36; border: 1px solid #A9D8BA; }
.bcap-notice--erreur { background: #FBEAEA; color: #8A1C1C; border: 1px solid #E8B4B4; }
.bcap-edit { background: #FFF6DB; border: 1px solid #F0D98A; color: #5C4300; padding: 10px 14px; border-radius: 4px; font-size: 15px; }
.bcap-hint { margin: 0; background: #E6F2F4; color: #145F6B; border-radius: 4px; padding: 10px 14px; font-size: 15px; }
.bcap-hint[hidden] { display: none; }
.bcap-form { display: flex; flex-direction: column; gap: 18px; padding: 20px; background: #F5F6F4; border-radius: 8px; }
.bcap-form__head { display: flex; flex-wrap: wrap; gap: 14px; }
.bcap-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; margin: 0; }
.bcap-field--grow { flex: 1 1 260px; }
.bcap-field--date { flex: 1 1 150px; }
.bcap-field input, .bcap-field select { min-height: 48px; padding: 8px 12px; border: 1px solid #C3CBD5; border-radius: 4px; background: #fff; color: var(--bcap-ink); font-size: 16px; line-height: 1.3; font-family: inherit; width: 100%; min-width: 0; box-sizing: border-box; }

/* Lignes salariés : une ligne par salarié, même sur téléphone. */
.bcap-rows { display: flex; flex-direction: column; gap: 6px; }
.bcap-rows__labels, .bcap-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px 58px 56px 28px; gap: 4px; align-items: center; }
.bcap-rows__labels { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--bcap-muted); text-transform: uppercase; letter-spacing: .03em; }
.bcap-rows__total, .bcap-row__total { display: none; }
.bcap-row { padding: 6px; background: #fff; border: 1px solid var(--bcap-line); border-radius: 6px; }
.bcap-row .bcap-field { gap: 0; }
.bcap-row__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bcap-row select, .bcap-row input[type="time"] { min-height: 44px; padding: 4px 6px; font-size: 15px; -webkit-appearance: none; appearance: none; background-image: none; }
.bcap-row select[name="personnel_id[]"] { font-weight: 600; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.bcap-row input[type="time"], .bcap-row select[name="pause[]"] { text-align: center; text-align-last: center; padding: 4px 2px; }
.bcap-row input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
.bcap-row input[type="time"]::-webkit-datetime-edit { padding: 0; }
.bcap-row__total.is-error { color: #8A1C1C; }
.bcap-row__remove { width: 28px; height: 44px; border: 0; border-radius: 4px; background: transparent; color: var(--bcap-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
.bcap-row__remove:hover { background: #FBEAEA; color: #8A1C1C; }

.bcap-form__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bcap-total { margin: 0 !important; font-size: 16px; display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.login__card--wide { max-width: 1000px; }
/* Une fois connecté, le bandeau « Accès salariés » passe au-dessus pour laisser la place. */
.logged-in .login { grid-template-columns: 1fr; min-height: 0; }
.logged-in .login__side-inner { padding-block: 40px; max-width: none; }
.logged-in .login__title { font-size: clamp(40px, 5vw, 56px); }
.logged-in .login__main { padding-top: 32px; align-items: flex-start; }
.bcap-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 4px; background: var(--bcap-accent); color: #fff; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.bcap-btn:hover { filter: brightness(.9); }
.bcap-btn--ghost { background: #fff; color: var(--bcap-ink); border: 1px solid var(--bcap-ink); min-height: 48px; font-size: 16px; }
.bcap-empty { color: var(--bcap-muted); margin: 0; }
.bcap-link { border: 0; background: none; padding: 6px 0; color: var(--bcap-accent); text-decoration: underline; font: inherit; font-size: 15px; cursor: pointer; }

.bcap-history { display: flex; flex-direction: column; gap: 12px; }
.bcap-day { border: 1px solid var(--bcap-line); border-radius: 6px; background: #fff; padding: 14px 16px; }
.bcap-day__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.bcap-day__date { margin: 0; font-weight: 600; }
.bcap-day__site { margin: 2px 0 0; font-size: 14px; color: var(--bcap-muted); }
.bcap-day__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 15px; white-space: nowrap; }
.bcap-day__list { list-style: none; margin: 12px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.bcap-day__list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding-top: 6px; border-top: 1px solid #EEF1F4; margin: 0 !important; }
.bcap-day__hours { grid-column: 1; color: var(--bcap-muted); font-size: 14px; }
.bcap-day__total { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; }
.bcap-day__note { margin: 10px 0 0; font-size: 14px; color: var(--bcap-muted); font-style: italic; }

/* Congés */
.bcap-conges__list { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.bcap-conge { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--bcap-line); border-radius: 6px; margin: 0 !important; }
.bcap-conge p { margin: 0; }
.bcap-conge__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bcap-conge__dates { font-weight: 600; }
.bcap-conge__meta { font-size: 14px; color: var(--bcap-muted); }
.bcap-conge__reponse { font-size: 14px; font-style: italic; }
.bcap-conge__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.bcap-conge__side form { margin: 0; }
.bcap-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bcap-badge--attente { background: #FFF6DB; color: #5C4300; }
.bcap-badge--accepte { background: #E3F4EA; color: #1C5B36; }
.bcap-badge--refuse { background: #FBEAEA; color: #8A1C1C; }
.bcap-badge--annule { background: #EEF1F4; color: #56627A; }

/* Écrans plus larges : colonne « Total » par salarié et champs plus confortables. */
@container (min-width: 620px) {
	.bcap-rows__labels, .bcap-row { grid-template-columns: minmax(150px, 1fr) 110px 110px 96px 64px 32px; gap: 10px; }
	.bcap-rows__labels { padding: 0 14px; }
	.bcap-row { padding: 10px 14px; }
	.bcap-rows__total, .bcap-row__total { display: block; text-align: right; font-weight: 600; }
	.bcap-row select, .bcap-row input[type="time"] { min-height: 48px; font-size: 16px; }
}
@container (max-width: 420px) {
	.bcap-form { padding: 12px; gap: 14px; }
}

/* Le thème met en colonne les paragraphes des formulaires de la carte de connexion : on rétablit. */
.login__card .bcap-form p.bcap-total { flex-direction: row; font-weight: 400; }
.login__card .bcap-form p.bcap-edit, .login__card .bcap-form p.bcap-hint { display: block; font-weight: 400; }
.login__card .bcap-form p.bcap-hint[hidden] { display: none; }

/* Dans l'espace salariés « application », le titre est déjà dans la barre du haut. */
.app .bcap > .bcap__title:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Listes de choix sur ordinateur (chantier, salariés) ---------- */
.bcap-pick { position: relative; width: 100%; min-width: 0; }
.bcap-pick__native { position: absolute !important; inset: auto auto 0 0; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; padding: 0 !important; border: 0 !important; }
.bcap-pick__btn .bcap-pick__badge { padding: 3px 7px; font-size: 11px; }
.bcap-pick__btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 6px 42px 6px 10px; border: 1.5px solid #C3CBD5; border-radius: 10px; background: #fff; color: var(--bcap-ink); font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bcap-pick__btn:hover { border-color: var(--bcap-accent); box-shadow: 0 4px 14px rgba(28, 127, 142, .14); }
.bcap-pick__btn:focus-visible { outline: none; border-color: var(--bcap-accent); box-shadow: 0 0 0 4px rgba(28, 127, 142, .22); }
.bcap-pick.is-open .bcap-pick__btn { border-color: var(--bcap-accent); box-shadow: 0 0 0 4px rgba(28, 127, 142, .18); }
.bcap-pick__chevron { position: absolute; right: 14px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2.5px solid var(--bcap-accent); border-bottom: 2.5px solid var(--bcap-accent); transform: rotate(45deg); transition: transform .2s; }
.bcap-pick.is-open .bcap-pick__chevron { transform: translateY(4px) rotate(225deg); }
.bcap-pick__placeholder { color: #8A94A6; font-weight: 500; }
.bcap-pick__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcap-pick__avatar { flex: 0 0 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.bcap-pick__code { flex: 0 0 auto; padding: 4px 8px; border-radius: 6px; background: #E6F2F4; color: #145F6B; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.bcap-pick__badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: #FFF1D6; color: #7A4B00; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bcap-pick.is-pop .bcap-pick__btn { animation: bcap-pop .35s ease; }
@keyframes bcap-pop { 0% { transform: scale(1); } 40% { transform: scale(1.025); background: #F0FAFB; } 100% { transform: scale(1); } }
.bcap-pick.is-invalid .bcap-pick__btn { border-color: #C0392B; box-shadow: 0 0 0 4px rgba(192, 57, 43, .15); }
.bcap-pick.is-invalid::after { content: attr(data-error); position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; padding: 4px 10px; border-radius: 6px; background: #C0392B; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bcap-pick.is-open::after { display: none; }

.bcap-pick__panel { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: max(100%, 360px); max-width: 92vw; display: flex; flex-direction: column; background: #fff; border: 1px solid #DCE1E6; border-radius: 14px; box-shadow: 0 24px 48px rgba(21, 32, 51, .2); overflow: hidden; animation: bcap-drop .16s ease-out; }
@keyframes bcap-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.bcap .bcap-pick__search { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: auto; margin: 12px 12px 6px; min-height: 46px; padding: 8px 12px 8px 40px; border: 1.5px solid #DCE1E6; border-radius: 10px; font-family: inherit; font-size: 16px; color: var(--bcap-ink); background: #F5F6F4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2356627A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center !important; padding-left: 40px !important; }
.bcap .bcap-pick__search::-webkit-search-cancel-button { cursor: pointer; }
.bcap .bcap-pick__search:focus { outline: none; border-color: var(--bcap-accent); background-color: #fff !important; }
.bcap-pick__list { list-style: none; margin: 0 !important; padding: 4px 8px 10px !important; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.bcap-pick__group { position: sticky; top: 0; z-index: 1; margin: 0 !important; padding: 10px 8px 6px; background: #fff; color: var(--bcap-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.bcap-pick__item { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 8px 10px; border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--bcap-ink); cursor: pointer; transition: background .1s; }
.bcap-pick__item.is-active { background: #E6F2F4; }
.bcap-pick__item.is-active .bcap-pick__avatar { transform: scale(1.08); }
.bcap-pick__avatar { transition: transform .15s; }
.bcap-pick__item.is-selected::after { content: ""; flex: 0 0 auto; width: 6px; height: 12px; margin: 0 6px 4px auto; border-right: 2.5px solid var(--bcap-accent); border-bottom: 2.5px solid var(--bcap-accent); transform: rotate(45deg); }
.bcap-pick__item.is-taken { opacity: .45; cursor: not-allowed; }
.bcap-pick__note { margin-left: auto; font-size: 13px; font-weight: 500; font-style: italic; color: var(--bcap-muted); }
.bcap-pick__empty { margin: 0 !important; padding: 18px 10px; text-align: center; color: var(--bcap-muted); font-size: 15px; }
.bcap-pick__item[hidden], .bcap-pick__group[hidden], .bcap-pick__empty[hidden] { display: none; }

/* Ordinateur : lignes plus aérées, listes natives restantes (pause) plus lisibles. */
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
	.bcap-field { font-size: 15px; }
	.bcap-row { transition: border-color .15s, box-shadow .15s; }
	@container (min-width: 620px) {
		.bcap-rows__labels, .bcap-row { grid-template-columns: minmax(220px, 1fr) 104px 104px 92px 60px 32px; }
	}
	.bcap-row:hover { border-color: #B9D9DE; box-shadow: 0 4px 14px rgba(21, 32, 51, .06); }
	.bcap-row select[name="pause[]"], .bcap-row input[type="time"], .bcap-field input[type="date"] { border-radius: 10px; border-width: 1.5px; font-size: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
	.bcap-row select[name="pause[]"]:hover, .bcap-row input[type="time"]:hover, .bcap-field input[type="date"]:hover { border-color: var(--bcap-accent); }
	.bcap-row select[name="pause[]"]:focus, .bcap-row input[type="time"]:focus, .bcap-field input[type="date"]:focus { outline: none; border-color: var(--bcap-accent); box-shadow: 0 0 0 4px rgba(28, 127, 142, .2); }
	.bcap-row__remove { border-radius: 8px; transition: background .15s, color .15s, transform .15s; }
	.bcap-row__remove:hover { transform: scale(1.1); }
	.bcap-btn--ghost { border-radius: 10px; transition: background .15s, color .15s; }
	.bcap-btn--ghost:hover { background: var(--bcap-ink); color: #fff; }
}