/* Styles spécifiques à l'aide HPP */

header {
    --header: #7f1d1d;
}

.timers {
    grid-template-columns: repeat(2, 1fr);
}

.choice-options {
    display: grid;
    gap: 10px;
}

.choice-options button {
    min-height: 52px;
}

.choice-option.selected {
    background: var(--green-light);
    border-color: #a5d6a7;
}

.choice-note-wrap {
    margin-top: 14px;
}

.choice-note-wrap textarea {
    min-height: 64px;
    resize: vertical;
}

.choice-note-wrap[hidden],
#choiceModalActions[hidden] {
    display: none !important;
}

.labs-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 15px;
}

.lab-option {
    min-height: 48px;
    text-align: left;
    justify-content: flex-start;
}

.lab-option.selected {
    background: var(--green-light);
    border-color: #a5d6a7;
}

.labs-custom-list {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.labs-custom-row {
    display: grid;
    grid-template-columns: 1fr 42px;
    gap: 8px;
    align-items: start;
}

.labs-custom-row input {
    margin-bottom: 0;
}

.labs-custom-remove {
    min-height: 42px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--red);
    background: var(--red-light);
    border-color: #ef9a9a;
}

.labs-add-custom {
    width: 100%;
    margin-bottom: 15px;
}

@media (max-width: 600px) {
    .labs-options {
        grid-template-columns: 1fr;
    }
}

button.action:disabled {
    opacity: .45;
    cursor: not-allowed;
}

button.action:active,
.action-undo:active {
    transform: none;
}

.actions {
    overflow: visible;
}

.action-wrap {
    position: relative;
    min-width: 0;
}

.action-wrap > .action {
    width: 100%;
    min-height: 58px;
}

.action-wrap > .action.has-clicks {
    background: var(--green-light);
    border-color: #a5d6a7;
}

.action-count {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--red);
    color: white;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.action-count[hidden],
.action-undo[hidden] {
    display: none;
}

.action-undo {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 999px;
    background: #263238;
    color: white;
    border-color: #263238;
    font-size: 11px;
    line-height: 1;
}

/* Soignants : rôles plus longs + bouton supprimer */

.care-team-header,
.care-team-row {
    grid-template-columns: minmax(150px, 210px) 1fr 46px;
}

.care-team-role {
    font-size: 13px;
    line-height: 1.3;
    padding-right: 8px;
}

.care-team-row .role-input {
    width: 100%;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fafbfc;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 10px;
}

.care-team-row .role-input:focus {
    outline: none;
    border-color: var(--blue);
    background: white;
    box-shadow: 0 0 0 3px rgba(21,101,192,.10);
}

.care-team-remove {
    padding: 6px 8px;
    font-size: 12px;
    color: var(--red);
    background: var(--red-light);
    border-color: #ef9a9a;
}

/* Chronologie segmentée */

.timeline.timeline-board {
    border-left: 0;
    padding-left: 0;
    overflow-x: auto;
    overflow-y: visible;
    min-height: 420px;
    overflow-anchor: none;
}

.timeline-lanes {
    min-height: 378px;
}

.timeline-axis-row,
.timeline-lane {
    display: grid;
    grid-template-columns: 168px 1fr;
    align-items: stretch;
    min-width: 640px;
}

.timeline-label-spacer,
.timeline-lane-label {
    padding: 8px 10px 8px 0;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--muted);
}

.timeline-lane-label {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.timeline-lane-track {
    position: relative;
    min-height: 42px;
    padding: 6px 0 2px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.02) 50%);
}

.timeline-lane-track .timeline-event-row {
    position: relative;
    margin: 0 0 8px;
    height: 32px;
}

.journal-card:not(.is-open) .card-title {
    margin-bottom: 0;
}

button.journal-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    font-weight: inherit;
}

button.journal-toggle:hover {
    opacity: 1;
}

button.journal-toggle:active {
    transform: none;
}

.journal-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.journal-toggle-title {
    font-size: 17px;
    font-weight: 700;
}

.journal-chevron {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 6px;
    background: var(--surface2);
    border: 1px solid var(--border);
    position: relative;
}

.journal-chevron::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 8px;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
}

.journal-card.is-open .journal-chevron::before {
    top: 5px;
    left: 7px;
    transform: rotate(45deg);
}

@media (max-width: 600px) {
    .care-team-header,
    .care-team-row {
        grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) 36px;
    }

    .care-team-header > div,
    .care-team-row > div,
    .care-team-row > input {
        padding: 8px;
    }

    .care-team-role,
    .care-team-row .role-input {
        font-size: 12px;
    }

    .timeline.timeline-board {
        min-height: 320px;
    }

    .timeline-axis-row,
    .timeline-lane {
        grid-template-columns: 88px 1fr;
        min-width: 420px;
    }

    .timeline-lane-label {
        font-size: 10px;
        padding-right: 6px;
    }

    button.journal-toggle {
        min-width: 0;
        flex: 1;
    }
}