/* Shared inputs/buttons inside bottom sheets — loaded from MainLayout. */

.sheet-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sheet-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sheet-field-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted-foreground);
    font-weight: 600;
}

.sheet-field-hint {
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

.sheet-input {
    width: 100%;
    background-color: var(--input);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.65rem 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    min-height: 44px;
}

.sheet-input:focus {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
    box-shadow: var(--shadow-focus);
}

.sheet-input:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

textarea.sheet-input {
    min-height: 60px;
    resize: vertical;
}

.sheet-datetime {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 0.5rem;
}

.sheet-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B4B4B4' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 16px;
    padding-right: 2.25rem;
    cursor: pointer;
}

.sheet-select::-ms-expand {
    display: none;
}

.sheet-select:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F8F8F8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.sheet-select option {
    background-color: var(--popover);
    color: var(--popover-foreground);
}

.sheet-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.bottom-sheet .sheet-actions {
    position: sticky;
    bottom: 0;
    margin: 0.5rem -1.1rem 0;
    padding: 0.75rem 1.1rem 1.1rem;
    background-color: var(--popover);
    border-top: 1px solid var(--border);
    z-index: 1;
}

.btn-primary,
.btn-secondary,
.btn-repeat {
    flex: 1;
    min-height: 48px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-inline: 0.5rem;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background-color var(--motion-duration-fast) var(--ease-smooth),
                transform var(--motion-duration-fast) var(--ease-smooth);
}

.btn-primary {
    background-color: var(--foreground);
    color: var(--background);
    border-color: var(--foreground);
}

.btn-secondary {
    background-color: transparent;
    color: var(--foreground);
}

.btn-secondary:hover {
    background-color: var(--accent);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-repeat:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary:active:not(:disabled),
.btn-secondary:active,
.btn-repeat:active:not(:disabled) {
    transform: scale(0.98);
}

/* Bouton destructeur — global, et non scopé.
   Il vivait dans ConfirmDialog.razor.css, donc compilé en `.btn-danger[b-…]` : les huit autres
   composants qui l'écrivent — dont les trois formulaires de la page Santé et quatre panneaux —
   rendaient un bouton de suppression sans aucun style. Sa place est ici, à côté de ses frères. */
.btn-danger {
    flex: 1;
    min-height: 44px;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-color: var(--destructive);
    color: var(--destructive-foreground);
    border: 1px solid var(--destructive);
    cursor: pointer;
    transition: background-color var(--motion-duration-fast) var(--ease-smooth),
                transform var(--motion-duration-fast) var(--ease-smooth);
}

.btn-danger:active:not(:disabled) {
    transform: scale(0.97);
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger:hover:not(:disabled) {
    background-color: oklch(from var(--destructive) calc(l + 0.04) c h);
}

/* Un bouton qui ne porte qu'une icône n'a pas de libellé à loger, et `flex: 1` lui donnait
   pourtant le tiers de la rangée — 107 px pour une corbeille de 16. Ce tiers manquait au bouton
   d'à côté : à 375 px, « Mettre à jour » se coupait en deux lignes et la coche se retrouvait
   collée contre le bord gauche, à mi-hauteur entre les deux morceaux du mot. La corbeille prend
   maintenant sa largeur, pas celle d'une phrase. Les 52 px gardent la cible tactile au-dessus
   des 44 recommandés. */
.btn-icon-only {
    flex: 0 0 auto;
    width: 52px;
    padding: 0;
}

.btn-repeat {
    background-color: oklch(from var(--event-bottle) l c h / 0.18);
    color: var(--event-bottle);
    border-color: oklch(from var(--event-bottle) l c h / 0.45);
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
}

.btn-repeat:hover {
    background-color: oklch(from var(--event-bottle) l c h / 0.25);
}

.btn-repeat.btn-repeat-inline {
    flex: 0 0 auto;
    align-self: flex-start;
    min-height: 0;
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: -0.5rem;
    background-color: var(--secondary);
    color: var(--muted-foreground);
    border-color: var(--border);
}

.btn-repeat.btn-repeat-inline:hover {
    background-color: var(--accent);
    color: var(--foreground);
}

.amount-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 0.5rem;
    align-items: stretch;
}

.amount-step {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 1rem;
    min-height: 56px;
    cursor: pointer;
}

.amount-step:hover {
    background-color: var(--accent);
}

.amount-display {
    background-color: var(--input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
}

.amount-value {
    font-size: 1.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
    line-height: 1;
}

.amount-unit {
    color: var(--muted-foreground);
    font-size: 0.95rem;
}

.preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.preset {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    min-height: 44px;
    cursor: pointer;
}

.preset:hover {
    background-color: var(--accent);
}

.preset-active {
    background-color: var(--foreground);
    color: var(--background);
    border-color: var(--foreground);
}

/* Sélection multiple : la même grille, mais une teinte plutôt que l'aplat de `.preset-active`
   — trois tuiles pleines côte à côte pèsent trop. Formule reprise de `.meal-type-active` et de
   `.chip-active`, et le jeton de couleur passe par une variable comme `--chip-accent`. */
.preset-multi {
    --preset-accent: var(--foreground);
}

.preset-multi-active {
    background-color: oklch(from var(--preset-accent) l c h / 0.22);
    color: var(--preset-accent);
    border-color: oklch(from var(--preset-accent) l c h / 0.55);
}

.meal-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.meal-type {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
    min-height: 48px;
    cursor: pointer;
}

.meal-type:hover {
    background-color: var(--accent);
}

.meal-type-active {
    background-color: oklch(from var(--event-meal) l c h / 0.22);
    color: var(--event-meal);
    border-color: oklch(from var(--event-meal) l c h / 0.55);
}

.reaction-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.reaction {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
    font-size: 0.72rem;
    cursor: pointer;
    min-height: 56px;
}

.reaction:hover {
    background-color: var(--accent);
}

.reaction-active {
    background-color: oklch(from var(--event-meal) l c h / 0.22);
    border-color: oklch(from var(--event-meal) l c h / 0.55);
    color: var(--foreground);
}

.reaction-emoji {
    font-size: 1.2rem;
    line-height: 1;
}

.sheet-details {
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
}

.sheet-details summary {
    cursor: pointer;
    color: var(--muted-foreground);
    font-size: 0.85rem;
    list-style: none;
}

.sheet-details summary::-webkit-details-marker {
    display: none;
}

.sheet-details summary::after {
    content: " +";
}

.sheet-details[open] summary::after {
    content: " −";
}

.sheet-details[open] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}