/* =========================================================
   CARE AGENDA — AGENDA V1
   UI POLISH
   ========================================================= */

.ca-runtime-workspace {
    width: 100%;
}


/* =========================================================
   AGENDA CONTAINER
   ========================================================= */

.ca-agenda {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 28px;
    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.ca-agenda-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: 22px;
}

.ca-agenda-heading {
    min-width: 0;
}

.ca-agenda-eyebrow {
    display: block;

    margin-bottom: 6px;

    color: #718096;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.ca-agenda-heading h1 {
    margin: 0;

    color: #17212b;

    font-size: 30px;
    line-height: 1.1;
    font-weight: 750;

    letter-spacing: -0.035em;
}

.ca-agenda-heading p {
    margin: 7px 0 0;

    color: #718096;

    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.ca-agenda-actions {
    display: flex;
    align-items: center;

    gap: 6px;

    flex: 0 0 auto;
}

.ca-agenda-actions .ca-button {
    min-width: 38px;

    min-height: 38px;

    padding: 0 11px;
}


.ca-agenda-actions .ca-button-primary {
    min-width: 92px;
}

.ca-button {
    min-height: 38px;

    padding: 0 14px;

    border: 1px solid #e5e9ef;
    border-radius: 10px;

    font: inherit;
    font-size: 12px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.ca-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.ca-button:disabled {
    opacity: 0.42;
    cursor: default;
}

.ca-button-secondary {
    background: #ffffff;
    color: #17212b;
}

.ca-button-secondary:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #d9dee6;
}

.ca-button-primary {
    background: #17212b;
    border-color: #17212b;
    color: #ffffff;
}

.ca-button-primary:hover:not(:disabled) {
    background: #24303c;
}

/* =========================================================
   CARE AGENDA — NAVIGATION PRINCIPALE
   ========================================================= */

.ca-agenda-navigation {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-bottom: 8px;

    padding: 4px;

    border: 1px solid #e5e9ef;
    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03);

    width: fit-content;
}


.ca-agenda-navigation button {
    min-height: 34px;

    padding: 0 13px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #64748b;

    font: inherit;
    font-size: 12px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}


.ca-agenda-navigation button:hover {
    background: #f8fafc;

    color: #17212b;
}


.ca-agenda-navigation button.is-active {
    background: #17212b;

    color: #ffffff;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .10);
}


.ca-agenda-navigation button.is-active:hover {
    background: #24303c;

    color: #ffffff;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .ca-agenda-navigation {
        width: 100%;

        overflow-x: auto;

        margin-bottom: 8px;

        padding: 3px;

        scrollbar-width: none;
    }


    .ca-agenda-navigation::-webkit-scrollbar {
        display: none;
    }


    .ca-agenda-navigation button {
        flex: 1 0 auto;

        min-height: 36px;

        padding: 0 12px;

        white-space: nowrap;
    }

}

/* =========================================================
   PILOTAGE — INDICATEURS
   ========================================================= */

.ca-agenda-indicators {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 24px;
}


.ca-indicator-card {
    position: relative;

    min-width: 0;

    min-height: 94px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 16px 18px 16px 20px;

    overflow: hidden;

    border: 1px solid #e5e9ef;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03);

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


.ca-indicator-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 3px;

    background: #cbd5e1;
}


.ca-indicator-card:hover {
    border-color: #d9e0e8;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, .05);

    transform: translateY(-1px);
}


.ca-indicator-label {
    display: block;

    color: #718096;

    font-size: 11px;
    line-height: 1.35;
    font-weight: 650;

    letter-spacing: .01em;
}


.ca-indicator-value {
    display: block;

    margin-top: 8px;

    color: #17212b;

    font-size: 26px;
    line-height: 1;

    font-weight: 750;

    letter-spacing: -0.035em;
}

.ca-indicator-card:nth-child(1)::before {
    background: #f59e0b;
}


.ca-indicator-card:nth-child(2)::before {
    background: #2563eb;
}


.ca-indicator-card:nth-child(3)::before {
    background: #16a34a;
}


.ca-indicator-card:nth-child(4)::before {
    background: #dc2626;
}

/* =========================================================
   PILOTAGE — ACTIVITÉ
   ========================================================= */

.ca-agenda-activity {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 24px;
}


.ca-activity-card {
    min-width: 0;

    padding: 17px 18px 12px;

    border: 1px solid #e5e9ef;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03);

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.ca-activity-card:hover {
    border-color: #d9e0e8;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, .05);
}


.ca-activity-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding-bottom: 11px;

    border-bottom: 1px solid #eef1f5;
}


.ca-activity-eyebrow {
    display: block;

    margin-bottom: 4px;

    color: #94a3b8;

    font-size: 9px;
    line-height: 1.2;
    font-weight: 750;

    letter-spacing: .08em;
}


.ca-activity-header h3 {
    margin: 0;

    color: #17212b;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;

    letter-spacing: -0.01em;
}


.ca-activity-list {
    display: flex;
    flex-direction: column;
}


.ca-activity-row {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 40px;

    border-bottom: 1px solid #f1f3f6;
}


.ca-activity-row:last-child {
    border-bottom: 0;
}


.ca-activity-name {
    min-width: 0;

    overflow: hidden;

    color: #475569;

    font-size: 12px;
    line-height: 1.4;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.ca-activity-count {
    flex: 0 0 auto;

    min-width: 28px;

    padding: 5px 7px;

    border: 1px solid #edf0f3;
    border-radius: 8px;

    background: #f8fafc;

    color: #17212b;

    font-size: 11px;
    line-height: 1;
    font-weight: 750;

    text-align: center;
}


.ca-activity-empty {
    padding: 16px 0 4px;

    color: #94a3b8;

    font-size: 11px;
    line-height: 1.5;
}

/* =========================================================
   CARE AGENDA — COCKPIT
   PILOTAGE V1 — UI POLISH
   ========================================================= */


/* ---------------------------------------------------------
   CARTES D’ACTION / LECTURE
   --------------------------------------------------------- */

.ca-cockpit-action-card,
.ca-cockpit-upcoming-card,
.ca-cockpit-attention-card {

    min-width: 0;

    padding: 18px 18px 14px;

    border: 1px solid #e5e9ef;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03);
}


/* ---------------------------------------------------------
   DEMANDES + PROCHAINS RENDEZ-VOUS
   --------------------------------------------------------- */

.ca-cockpit-action-card,
.ca-cockpit-upcoming-card {

    display: flex;
    flex-direction: column;

    min-height: 0;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.ca-cockpit-action-card:hover,
.ca-cockpit-upcoming-card:hover {

    border-color: #d9e0e8;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, .05);
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.ca-cockpit-action-header,
.ca-cockpit-upcoming-header,
.ca-cockpit-attention-header {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    padding-bottom: 12px;

    border-bottom: 1px solid #eef1f5;
}


.ca-cockpit-eyebrow {

    display: block;

    margin-bottom: 4px;

    color: #94a3b8;

    font-size: 9px;
    line-height: 1.2;
    font-weight: 750;

    letter-spacing: .08em;
}


.ca-cockpit-action-header h3,
.ca-cockpit-upcoming-header h3,
.ca-cockpit-attention-header h3 {

    margin: 0;

    color: #17212b;

    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;

    letter-spacing: -.01em;
}


/* ---------------------------------------------------------
   COMPTEUR
   --------------------------------------------------------- */

.ca-cockpit-action-count,
.ca-cockpit-upcoming-count {

    flex: 0 0 auto;

    min-width: 28px;

    padding: 5px 8px;

    border: 1px solid #edf0f3;
    border-radius: 8px;

    background: #f8fafc;

    color: #17212b;

    font-size: 11px;
    line-height: 1;

    font-weight: 750;

    text-align: center;
}


/* ---------------------------------------------------------
   CONTENU — À TRAITER
   --------------------------------------------------------- */

.ca-cockpit-action-content {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding-top: 14px;

    min-height: 48px;
}


.ca-cockpit-action-content p {

    margin: 0;

    color: #64748b;

    font-size: 12px;
    line-height: 1.5;
}


.ca-cockpit-action-content .ca-button {

    flex: 0 0 auto;

    min-height: 34px;

    padding: 0 11px;

    font-size: 11px;
}


/* ---------------------------------------------------------
   PROCHAINS RENDEZ-VOUS
   --------------------------------------------------------- */

.ca-cockpit-upcoming-list {

    display: flex;
    flex-direction: column;
}


.ca-cockpit-upcoming-row {

    display: grid;

    grid-template-columns:
        48px minmax(0, 1fr) auto;

    align-items: center;

    gap: 12px;

    min-width: 0;

    min-height: 50px;

    border-bottom: 1px solid #f1f3f6;

    cursor: pointer;

    transition:
        background-color .15s ease;
}


.ca-cockpit-upcoming-row:last-child {

    border-bottom: 0;
}


.ca-cockpit-upcoming-row:hover {

    background: #fafbfc;
}


.ca-cockpit-upcoming-time {

    color: #2563eb;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -.01em;
}


.ca-cockpit-upcoming-main {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.ca-cockpit-upcoming-main strong {

    min-width: 0;

    overflow: hidden;

    color: #17212b;

    font-size: 12px;
    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.ca-cockpit-upcoming-main span {

    min-width: 0;

    overflow: hidden;

    color: #718096;

    font-size: 10px;
    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.ca-cockpit-upcoming-professional {

    max-width: 150px;

    overflow: hidden;

    color: #64748b;

    font-size: 10px;
    line-height: 1.35;

    text-align: right;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   POINTS D’ATTENTION
   --------------------------------------------------------- */

.ca-cockpit-attention-card {

    margin-top: 12px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.ca-cockpit-attention-card:hover {

    border-color: #d9e0e8;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, .05);
}


.ca-cockpit-attention-list {

    display: flex;
    flex-direction: column;
}


.ca-cockpit-attention-row {

    display: flex;
    align-items: center;

    gap: 11px;

    min-height: 44px;

    border-bottom: 1px solid #f1f3f6;
}


.ca-cockpit-attention-row:last-child {

    border-bottom: 0;
}


.ca-cockpit-attention-indicator {

    flex: 0 0 auto;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f59e0b;

    box-shadow:
        0 0 0 3px rgba(245, 158, 11, .10);
}


.ca-cockpit-attention-label {

    min-width: 0;

    color: #475569;

    font-size: 11px;
    line-height: 1.45;

    font-weight: 500;
}


.ca-cockpit-attention-empty,
.ca-cockpit-upcoming-empty {

    padding: 16px 0 4px;

    color: #94a3b8;

    font-size: 11px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   ORGANISATION DES BLOCS DU COCKPIT
   --------------------------------------------------------- */

.ca-cockpit-action-card,
.ca-cockpit-upcoming-card {

    margin-bottom: 12px;
}


/* ---------------------------------------------------------
   TABLETTE / MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .ca-cockpit-action-card,
    .ca-cockpit-upcoming-card,
    .ca-cockpit-attention-card {

        padding: 16px 15px 12px;

        border-radius: 13px;
    }


    .ca-cockpit-action-content {

        align-items: stretch;

        flex-direction: column;

        gap: 12px;
    }


    .ca-cockpit-action-content .ca-button {

        width: 100%;
    }


    .ca-cockpit-upcoming-row {

        grid-template-columns:
            48px minmax(0, 1fr);

        gap: 10px;

        padding: 8px 0;
    }


    .ca-cockpit-upcoming-professional {

        grid-column: 2;

        max-width: none;

        text-align: left;

        white-space: normal;
    }


    .ca-cockpit-attention-row {

        min-height: 44px;
    }

}

/* =========================================================
   TOOLBAR
   ========================================================= */

.ca-agenda-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 12px;
}

.ca-agenda-date {
    min-width: 0;

    color: #17212b;

    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;

    letter-spacing: -0.01em;
}


/* =========================================================
   GRID
   ========================================================= */

.ca-agenda-grid {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5e9ef;
    border-radius: 14px;

    box-shadow:
        0 1px 2px rgba(23, 33, 43, 0.03);
}

.ca-agenda-grid-header {
    display: grid;

    grid-template-columns: 72px minmax(0, 1fr);

    min-height: 44px;

    background: #f8fafc;

    border-bottom: 1px solid #e5e9ef;

    color: #17212b;

    font-size: 11px;
    font-weight: 700;
}

.ca-agenda-grid-header > div {
    display: flex;
    align-items: center;

    padding: 0 12px;
}

.ca-time-header {
    border-right: 1px solid #e5e9ef;

    color: #94a3b8;

    font-size: 10px;
    font-weight: 650;

    letter-spacing: .01em;
}


/* =========================================================
   TIME GRID
   ========================================================= */

.ca-agenda-body {
    position: relative;
}

.ca-time-row {
    display: grid;

    grid-template-columns: 72px minmax(0, 1fr);

    min-height: 56px;
}

.ca-time-label {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    padding: 9px 10px 0 6px;

    border-right: 1px solid #edf0f3;
    border-bottom: 1px solid #edf0f3;

    color: #94a3b8;

    font-size: 10px;
    line-height: 1;

    font-weight: 500;
}

.ca-time-slot {
    border-bottom: 1px solid #edf0f3;

    background:
        linear-gradient(
            to bottom,
            transparent 49%,
            rgba(229, 233, 239, 0.35) 50%,
            transparent 51%
        );
}


/* =========================================================
   APPOINTMENTS
   ========================================================= */

.ca-appointments-layer {
    position: absolute;

    inset: 0 0 0 78px;

    pointer-events: none;
}

.ca-appointment {
    position: relative;

    margin: 5px 9px;

    padding: 8px 11px;

    border-left: 4px solid #2563eb;
    border-radius: 9px;

    background: #eff6ff;

    pointer-events: auto;

    box-shadow:
        0 1px 2px rgba(37, 99, 235, .04);

    transition:
        background-color .15s ease,
        box-shadow .15s ease;
}


.ca-appointment:hover {
    background: #eaf3ff;

    box-shadow:
        0 3px 8px rgba(37, 99, 235, .08);
}

.ca-appointment-time {
    color: #64748b;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
}

.ca-appointment-body {
    display: flex;
    flex-direction: column;

    gap: 2px;

    margin-top: 3px;
}

.ca-appointment-body strong {
    color: #17212b;

    font-size: 12px;
    line-height: 1.35;
}

.ca-appointment-body span {
    color: #475569;

    font-size: 11px;
    line-height: 1.35;
}

.ca-appointment-body small {
    color: #718096;

    font-size: 10px;
    line-height: 1.3;
}

/* =========================================================
   APPOINTMENT STATUS
   ========================================================= */

.ca-appointment-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    min-width: 0;
}


.ca-appointment-heading strong {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.ca-appointment-status {
    flex: 0 0 auto;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;

    white-space: nowrap;

    background: #f1f5f9;
    color: #64748b;
}


/* ---------------------------------------------------------
   STATUTS
   --------------------------------------------------------- */

.ca-appointment-status.is-status-confirmed {
    background: #ecfdf3;
    color: #15803d;
}


.ca-appointment-status.is-status-scheduled {
    background: #eff6ff;
    color: #2563eb;
}


.ca-appointment-status.is-status-rescheduled {
    background: #fff7ed;
    color: #c2410c;
}


.ca-appointment-status.is-status-completed {
    background: #f1f5f9;
    color: #475569;
}


.ca-appointment-status.is-status-no_show {
    background: #fef2f2;
    color: #b91c1c;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.ca-agenda-empty {
    min-height: 22px;

    padding: 10px 4px 0;

    color: #8a94a1;

    font-size: 11px;

    text-align: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    .ca-agenda {
        padding: 4px 0 20px;
    }

    .ca-agenda-header {
    align-items: stretch;

    flex-direction: column;

    gap: 14px;
    }

    .ca-agenda-actions {
    width: 100%;

    justify-content: stretch;
    }

    .ca-agenda-actions .ca-button {
        flex: 1;
    }

    .ca-agenda-toolbar {
        align-items: stretch;

        flex-direction: column;

        gap: 10px;
    }

    .ca-button-primary {
        width: 100%;
    }

    .ca-agenda-grid {
    overflow: hidden;
    }


    .ca-agenda-grid-header,
    .ca-time-row {
    grid-template-columns: 56px minmax(0, 1fr);

    min-width: 0;
    }


    .ca-appointments-layer {
    left: 56px;

    min-width: 0;
    }


    .ca-time-label {
    padding-right: 7px;
    padding-left: 4px;

    font-size: 9px;
    }
    
    .ca-appointment {
    margin: 5px 6px;

    padding: 7px 9px;

    border-left-width: 3px;
    }
    
    
    .ca-appointment-time {
        font-size: 9px;
    }
    
    
    .ca-appointment-body strong {
        font-size: 11px;
    }
    
    
    .ca-appointment-body span {
        font-size: 10px;
    }
    
    
    .ca-appointment-body small {
        font-size: 9px;
    }
    
    
    .ca-appointment-status {
        padding: 3px 6px;
    
        font-size: 8px;
    }

    .ca-agenda-heading h1 {
        font-size: 27px;
    }
}

/* =========================================================
   NEW APPOINTMENT MODAL
   ========================================================= */

.ca-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(23, 33, 43, 0.42);

    overflow-y: auto;
}

.ca-modal {
    width: min(620px, 100%);

    background: #ffffff;

    border: 1px solid #e5e9ef;
    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(23, 33, 43, 0.16);

    overflow: hidden;
}

.ca-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 24px 24px 20px;

    border-bottom: 1px solid #edf0f3;
}

.ca-modal-eyebrow {
    display: block;

    margin-bottom: 6px;

    color: #718096;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.ca-modal-header h2 {
    margin: 0;

    color: #17212b;

    font-size: 22px;
    line-height: 1.2;

    letter-spacing: -0.025em;
}

.ca-modal-header p {
    margin: 7px 0 0;

    color: #718096;

    font-size: 12px;
    line-height: 1.5;
}

.ca-modal-close {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #e5e9ef;
    border-radius: 9px;

    background: #ffffff;

    color: #718096;

    font-size: 21px;
    line-height: 1;

    cursor: pointer;
}

.ca-modal-close:hover {
    background: #f8fafc;
    color: #17212b;
}


/* =========================================================
   FORM
   ========================================================= */

.ca-appointment-form {
    padding: 22px 24px 24px;
}

.ca-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.ca-form-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.ca-form-field > span {
    color: #475569;

    font-size: 11px;
    font-weight: 700;
}

.ca-form-field input,
.ca-form-field select {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid #dfe4ea;
    border-radius: 9px;

    background: #ffffff;

    color: #17212b;

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.ca-form-field input:focus,
.ca-form-field select:focus {
    border-color: #94a3b8;

    box-shadow:
        0 0 0 3px rgba(
            37,
            99,
            235,
            0.08
        );
}

.ca-form-message {
    margin-top: 18px;

    padding: 10px 12px;

    border-radius: 9px;

    font-size: 12px;
    line-height: 1.5;
}

.ca-form-message.is-error {
    background: #fff5f5;
    color: #b42318;
}

.ca-form-message.is-success {
    background: #f0fdf4;
    color: #166534;
}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.ca-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid #edf0f3;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .ca-modal-backdrop {
        align-items: flex-end;

        padding: 0;
    }

    .ca-modal {
        width: 100%;

        border-radius:
            18px 18px 0 0;

        max-height: 94vh;

        overflow-y: auto;
    }

    .ca-modal-header {
        padding: 20px 18px 17px;
    }

    .ca-appointment-form {
        padding: 18px;
    }

    .ca-form-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .ca-modal-footer {
        flex-direction: column-reverse;

        align-items: stretch;
    }

    .ca-modal-footer .ca-button {
        width: 100%;
    }
}

.ca-agenda-activity {
    grid-template-columns: 1fr;

    gap: 10px;

    margin-bottom: 20px;
}


.ca-activity-card {
    padding: 16px 15px 12px;
}


.ca-activity-header {
    padding-bottom: 10px;
}


.ca-activity-header h3 {
    font-size: 13px;
}


.ca-activity-row {
    min-height: 40px;

    gap: 8px;
}


.ca-activity-name {
    font-size: 11px;
}

/* =========================================================
   REFERENTIALS
   ========================================================= */

.ca-reference-modal {
    width: min(700px, 100%);
}

.ca-reference-tabs {
    display: flex;
    align-items: flex-end;

    gap: 2px;

    padding: 8px 24px 0;

    border-bottom: 1px solid #edf0f3;

    overflow-x: auto;

    scrollbar-width: none;
}


.ca-reference-tabs::-webkit-scrollbar {
    display: none;
}

.ca-reference-tab {
    position: relative;

    flex: 0 0 auto;

    padding: 11px 13px;

    border: 0;
    border-radius: 8px 8px 0 0;

    background: transparent;

    color: #718096;

    font: inherit;
    font-size: 12px;
    font-weight: 650;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color .15s ease,
        color .15s ease;
}


.ca-reference-tab:hover {
    background: #f8fafc;

    color: #17212b;
}

.ca-reference-tab.is-active {
    color: #17212b;
}

.ca-reference-tab.is-active {
    color: #17212b;

    background: #f8fafc;
}

.ca-reference-tab.is-active::after {
    content: "";

    position: absolute;

    right: 10px;
    bottom: -1px;
    left: 10px;

    height: 2px;

    background: #2563eb;
    border-radius: 2px;
}

.ca-reference-content {
    padding: 22px 24px 24px;
}

.ca-reference-panel {
    display: none;
}

.ca-reference-panel.is-active {
    display: block;
}

.ca-reference-form {
    padding: 17px;

    border: 1px solid #e5e9ef;
    border-radius: 12px;

    background: #f8fafc;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .02);
}

.ca-reference-form-heading {
    margin-bottom: 13px;

    color: #17212b;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}

.ca-reference-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-bottom: 10px;
}

.ca-reference-fields input {
    width: 100%;
    min-height: 42px;

    box-sizing: border-box;

    padding: 0 11px;

    border: 1px solid #dfe4ea;
    border-radius: 9px;

    background: #ffffff;

    color: #17212b;

    font: inherit;
    font-size: 12px;

    outline: none;
}

.ca-reference-fields input:focus {
    border-color: #94a3b8;

    box-shadow:
        0 0 0 3px rgba(
            37,
            99,
            235,
            0.08
        );
}

.ca-reference-form .ca-button {
    min-height: 38px;
}

.ca-reference-list {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 18px;
}

.ca-reference-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 12px 14px;

    border: 1px solid #e8ecf1;
    border-radius: 10px;

    background: #ffffff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.ca-reference-item:hover {
    border-color: #dce2e9;

    box-shadow:
        0 2px 7px rgba(15, 23, 42, .04);
}

.ca-reference-item strong {
    display: block;

    color: #17212b;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}

.ca-reference-item span:not(.ca-reference-status) {
    display: block;

    margin-top: 3px;

    color: #718096;

    font-size: 11px;
    line-height: 1.4;
}

.ca-reference-status {
    flex: 0 0 auto;

    padding: 5px 8px;

    border-radius: 999px;

    background: #f1f5f9;

    color: #64748b;

    font-size: 10px;
    font-weight: 700;
}

.ca-reference-empty {
    padding: 24px 12px;

    color: #8a94a1;

    font-size: 12px;

    text-align: center;
}

.ca-reference-message {
    margin-top: 8px;

    color: #b42318;

    font-size: 11px;
}


@media (max-width: 640px) {

.ca-reference-tabs {
    overflow-x: auto;

    padding: 7px 14px 0;

    gap: 2px;

    scrollbar-width: none;
}


.ca-reference-tabs::-webkit-scrollbar {
    display: none;
}


.ca-reference-tab {
    flex: 0 0 auto;

    padding: 11px 12px;

    font-size: 11px;

    white-space: nowrap;
}


.ca-reference-content {
    padding: 16px 14px 18px;
}


.ca-reference-form {
    padding: 14px;

    border-radius: 11px;
}


.ca-reference-form-heading {
    margin-bottom: 12px;
}


.ca-reference-fields {
    grid-template-columns: 1fr;

    gap: 10px;
}


.ca-reference-fields input,
.ca-reference-fields select {
    min-height: 42px;

    box-sizing: border-box;
}


.ca-reference-form .ca-button {
    width: 100%;
}


.ca-reference-list {
    gap: 8px;

    margin-top: 16px;
}


.ca-reference-item {
    align-items: flex-start;

    flex-direction: column;

    gap: 10px;

    padding: 12px;
}


.ca-reference-item > div:first-child {
    width: 100%;
}


.ca-reference-item > div:first-child span {
    white-space: normal;
}

}

.ca-agenda-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    flex: 0 0 auto;
}

.ca-agenda-toolbar-actions .ca-button {
    min-height: 36px;

    padding: 0 12px;

    font-size: 11px;
}

.ca-agenda-toolbar-actions .ca-button-primary {
    min-width: 145px;
}

@media (max-width: 760px) {

.ca-agenda-toolbar-actions {
    width: 100%;

    flex-direction: column;

    gap: 7px;
}

.ca-agenda-toolbar-actions .ca-button {
        width: 100%;
    }
}

.ca-appointment {
    cursor: pointer;
}

.ca-appointment:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ca-appointment-details-content {
    display: grid;
    gap: 0;
    padding: 4px 0 8px;
}

.ca-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ca-detail-row:last-child {
    border-bottom: 0;
}

.ca-detail-row span {
    font-size: 13px;
    opacity: 0.65;
}

.ca-detail-row strong {
    font-size: 14px;
    text-align: right;
    
}
    
.ca-agenda-indicators {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 20px;
}


.ca-indicator-card {
    min-height: 82px;

    padding: 13px 14px 13px 17px;

    border-radius: 13px;
}


.ca-indicator-label {
    font-size: 10px;
    line-height: 1.3;
}


.ca-indicator-value {
    margin-top: 7px;

    font-size: 22px;
}

@media (max-width: 900px) {

    .ca-agenda-indicators {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 480px) {

    .ca-agenda-indicators {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) {

    .ca-detail-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .ca-detail-row strong {
        text-align: left;
    }
}

.ca-appointment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ca-button-danger {
    border: 1px solid rgba(190, 60, 60, 0.25);
    color: #a83232;
    background: #fff;
}

.ca-button-danger:hover {
    background: #fff5f5;
}

@media (max-width: 640px) {

    .ca-appointment-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ca-appointment-actions
    .ca-button {
        width: 100%;
    }
}

/* =========================================================
   CARE AGENDA — APPOINTMENT DETAILS POLISH
   ========================================================= */

.ca-appointment-details {
    width: min(780px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}

.ca-modal-backdrop:has(.ca-appointment-details) {
    align-items: center;
    overflow: hidden;
}

.ca-appointment-details .ca-appointment-details-content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
}

.ca-appointment-details > .ca-modal-header,
.ca-appointment-details > .ca-modal-footer {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.ca-appointment-details .ca-modal-header {
    padding: 28px 30px 22px;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.ca-appointment-details-content {
    padding: 8px 0;
}


/* ---------------------------------------------------------
   DETAIL ROW
   --------------------------------------------------------- */

.ca-appointment-details .ca-detail-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;

    gap: 24px;

    padding: 16px 30px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}


.ca-appointment-details .ca-detail-row:last-child {
    border-bottom: 0;
}


.ca-appointment-details .ca-detail-row span {
    font-size: 13px;
    line-height: 1.4;
    color: #6b7280;
}


.ca-appointment-details .ca-detail-row strong {
    min-width: 0;

    font-size: 14px;
    line-height: 1.45;

    text-align: right;

    color: #172033;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.ca-appointment-details .ca-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    padding: 20px 30px 24px;

    border-top: 1px solid rgba(0, 0, 0, 0.07);
}


.ca-appointment-details .ca-button {
    min-height: 46px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .ca-appointment-details {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        max-height: calc(100vh - 24px);
    }


    .ca-appointment-details .ca-modal-header {
        padding: 22px 20px 18px;
    }


    .ca-appointment-details .ca-detail-row {
        grid-template-columns: 1fr;

        gap: 5px;

        padding: 13px 20px;
    }


    .ca-appointment-details .ca-detail-row strong {
        text-align: left;
    }


    .ca-appointment-details .ca-modal-footer {
        display: grid;
        grid-template-columns: 1fr;

        gap: 9px;

        padding: 16px 20px 20px;
    }


    .ca-appointment-details .ca-button {
        width: 100%;
    }
}

/* =========================================================
   CARE AGENDA — AVAILABILITY V1
   UI POLISH
   ========================================================= */

.ca-reference-fields select {
    width: 100%;
    min-height: 40px;

    padding: 0 34px 0 11px;

    border: 1px solid #dfe4ea;
    border-radius: 9px;

    background-color: #ffffff;

    color: #17212b;

    font: inherit;
    font-size: 12px;
    font-weight: 500;

    outline: none;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}


.ca-reference-fields select:hover {
    border-color: #cbd3dc;
}


.ca-reference-fields select:focus {
    border-color: #94a3b8;

    box-shadow:
        0 0 0 3px rgba(
            37,
            99,
            235,
            0.08
        );
}


/* ---------------------------------------------------------
   TIME INPUTS
   --------------------------------------------------------- */

.ca-reference-fields input[type="time"] {
    appearance: none;
    -webkit-appearance: none;

    min-height: 40px;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   AVAILABILITY ACTIONS
   --------------------------------------------------------- */

.ca-reference-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    flex: 0 0 auto;
}


.ca-reference-actions .ca-button {
    min-height: 34px;

    padding: 0 10px;

    font-size: 11px;
}


.ca-reference-edit {
    white-space: nowrap;
}


.ca-reference-delete {
    white-space: nowrap;
}


/* ---------------------------------------------------------
   AVAILABILITY LIST ITEM
   --------------------------------------------------------- */

.ca-reference-item {
    min-width: 0;
}


.ca-reference-item > div:first-child {
    min-width: 0;
}


.ca-reference-item > div:first-child span {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .ca-reference-actions {
        width: 100%;

        justify-content: stretch;

        flex-wrap: wrap;
    }


    .ca-reference-actions .ca-reference-status {
        margin-right: auto;
    }


    .ca-reference-actions .ca-button {
        flex: 1 1 auto;

        min-width: 0;

        width: auto;
    }


    .ca-reference-item {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }


    .ca-reference-item > div:first-child {
        width: 100%;
    }


    .ca-reference-item > div:first-child span {
        white-space: normal;
    }


    .ca-reference-form {
        padding: 14px;
    }


    .ca-reference-fields {
        gap: 10px;
    }


    .ca-reference-fields select,
    .ca-reference-fields input {
        min-height: 42px;
    }

}

/* =========================================================
   CARE AGENDA — DEMANDES V1
   ========================================================= */

.ca-requests-content {
    width: 100%;
}

.ca-requests-list {
    display: grid;
    gap: 12px;
}

.ca-request-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto auto;

    align-items: center;

    gap: 24px;

    padding: 17px 20px;

    background: var(--ca-surface, #ffffff);

    border: 1px solid var(--ca-border, #e5e7eb);
    border-radius: 14px;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.ca-request-card:hover {
    border-color: var(--ca-primary, #2563eb);

    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.07);

    transform: translateY(-1px);
}

.ca-request-main {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ca-request-main strong {
    font-size: 14px;
    line-height: 1.35;

    font-weight: 700;

    color: var(--ca-text, #111827);
}

.ca-request-main span {
    font-size: 12px;
    line-height: 1.4;

    color: var(--ca-text-secondary, #6b7280);
}

.ca-request-main small {
    margin-top: 4px;

    font-size: 11px;
    line-height: 1.4;

    color: var(--ca-text-muted, #94a3b8);
}

.ca-request-professional {
    white-space: nowrap;

    font-size: 12px;
    font-weight: 600;

    color: var(--ca-text-secondary, #4b5563);
}

.ca-request-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ca-request-actions .ca-button {
    min-height: 38px;

    padding: 0 14px;

    font-size: 11px;
}

.ca-requests-empty {
    min-height: 220px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.ca-requests-empty-title {
    font-size: 16px;
    font-weight: 600;

    color: var(--ca-text, #111827);
}

.ca-requests-empty p {
    margin: 6px 0 0;

    font-size: 13px;

    color: var(--ca-text-secondary, #6b7280);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {

    .ca-request-card {
        grid-template-columns: 1fr;

        gap: 12px;

        padding: 15px;

        border-radius: 13px;
    }


    .ca-request-main {
        gap: 3px;
    }


    .ca-request-main strong {
        font-size: 14px;
    }


    .ca-request-main span {
        font-size: 11px;
    }


    .ca-request-main small {
        margin-top: 4px;

        font-size: 10px;
    }


    .ca-request-professional {
        white-space: normal;

        padding-top: 10px;

        border-top: 1px solid
            var(--ca-border, #e5e7eb);

        font-size: 11px;
    }


    .ca-request-actions {
        justify-content: stretch;

        padding-top: 2px;
    }


    .ca-request-actions .ca-button {
        width: 100%;

        min-height: 40px;
    }

}

/* =========================================================
   CARE AGENDA — AFFECTATIONS
   SERVICES À COCHER — UI POLISH
   ========================================================= */

.ca-reference-form[data-reference-form="assignment"]
    .ca-reference-form-heading {

    display: flex;
    flex-direction: column;
    gap: 4px;

    margin-bottom: 16px;
}


.ca-reference-form[data-reference-form="assignment"]
    .ca-reference-form-heading strong {

    color: #17212b;

    font-size: 13px;
    line-height: 1.4;
}


.ca-reference-form[data-reference-form="assignment"]
    .ca-reference-form-heading span {

    color: #718096;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
}


/* =========================================================
   FORMULAIRE — PROFESSIONNEL / SERVICES
   ========================================================= */

.ca-reference-form[data-reference-form="assignment"]
    .ca-reference-fields {

    display: grid;

    grid-template-columns:
        minmax(220px, 0.72fr)
        minmax(300px, 1.28fr);

    align-items: start;

    gap: 14px;

    margin-bottom: 14px;
}


/* =========================================================
   PROFESSIONNEL
   ========================================================= */

.ca-reference-form[data-reference-form="assignment"]
    select[name="professionalId"] {

    width: 100%;
    min-height: 42px;

    box-sizing: border-box;

    padding: 0 34px 0 12px;

    border: 1px solid #dfe4ea;
    border-radius: 9px;

    background: #ffffff;

    color: #17212b;

    font-size: 12px;
    font-weight: 500;

    outline: none;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.ca-reference-form[data-reference-form="assignment"]
    select[name="professionalId"]:hover {

    border-color: #cbd3dc;
}


.ca-reference-form[data-reference-form="assignment"]
    select[name="professionalId"]:focus {

    border-color: #94a3b8;

    box-shadow:
        0 0 0 3px rgba(
            37,
            99,
            235,
            0.08
        );
}


/* =========================================================
   CONTENEUR DES SERVICES
   ========================================================= */

.ca-assignment-services {

    min-width: 0;

    padding: 6px;

    border: 1px solid #e5e9ef;
    border-radius: 10px;

    background: #ffffff;
}


/* =========================================================
   LISTE DES SERVICES
   ========================================================= */

.ca-assignment-service-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;
}


/* =========================================================
   OPTION
   ========================================================= */

.ca-assignment-service-option {

    display: flex;
    align-items: center;

    min-width: 0;

    gap: 9px;

    box-sizing: border-box;

    padding: 9px 10px;

    border: 1px solid #edf0f3;
    border-radius: 8px;

    background: #ffffff;

    color: #344054;

    font-size: 12px;
    line-height: 1.35;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}


.ca-assignment-service-option:hover {

    background: #f8fafc;

    border-color: #d7dee8;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.ca-assignment-service-option
    input[type="checkbox"] {

    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin: 0;

    accent-color: #2563eb;

    cursor: pointer;
}


.ca-assignment-service-option span {

    min-width: 0;

    color: #344054;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.35;
}

/* =========================================================
   BOUTON
   ========================================================= */

.ca-reference-form[data-reference-form="assignment"]
    > .ca-button {

    margin-top: 2px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .ca-reference-form[data-reference-form="assignment"]
        .ca-reference-fields {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .ca-assignment-service-list {

        grid-template-columns: 1fr;

        gap: 6px;
    }


    .ca-assignment-service-option {

        min-height: 42px;

        padding: 10px 11px;
    }


    .ca-reference-form[data-reference-form="assignment"]
        > .ca-button {

        width: 100%;
    }

}