/* Feuille de style partagee de l'application Cabinet Taoussi Sara.
   Chargee via _content/CabinetApp.Shared/cabinet.css par les deux
   heads (Web et MAUI) pour garder une seule source de verite visuelle. */

:root {
    /* Palette alignee sur le logo : vert emeraude + dore, fond vert menthe clair */
    --cabinet-primary: #1f6f54;
    --cabinet-primary-dark: #123f30;
    --cabinet-accent: #b6923f;
    --cabinet-danger: #b3261e;
    --cabinet-success: #3f7d4a;
    --cabinet-border: #d5e0d2;
    --cabinet-muted: #6b7d73;
    --cabinet-bg-soft: #e6efe2;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.page-header h2 {
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.card {
    background: #fff;
    border: 1px solid var(--cabinet-border);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    color: var(--cabinet-primary-dark);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.detail-list dt {
    color: var(--cabinet-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.detail-list dd {
    margin: 0;
}

/* --- Formulaires --- */
.form-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1 1 220px;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: #2c3a37;
}

.form-group.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-group.form-check label {
    margin: 0;
}

.form-control {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--cabinet-border);
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box;
    background: #fff;
}

.form-control:focus {
    outline: none;
    border-color: var(--cabinet-primary);
    box-shadow: 0 0 0 3px rgba(31, 111, 84, 0.15);
}

textarea.form-control {
    min-height: 4.5rem;
    resize: vertical;
}

small.muted, p.muted, .muted {
    color: var(--cabinet-muted);
    font-size: 0.85rem;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.search-box {
    max-width: 420px;
    margin-bottom: 1rem;
}

/* --- Boutons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.55rem 1.1rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
    background: var(--cabinet-primary);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background: var(--cabinet-primary-dark);
}

.btn-secondary {
    background: #fff;
    color: #2c3a37;
    border-color: var(--cabinet-border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--cabinet-bg-soft);
}

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

/* --- Alertes --- */
.alert {
    padding: 0.65rem 0.9rem;
    border-radius: 6px;
    font-size: 0.9rem;
    margin: 0.75rem 0;
}

.alert-error {
    background: #fdecea;
    color: var(--cabinet-danger);
    border: 1px solid #f3c6c2;
}

.alert-success {
    background: #e9f6ec;
    color: var(--cabinet-success);
    border: 1px solid #bfe3c8;
}

.field-error {
    display: block;
    color: var(--cabinet-danger);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* --- Tableaux --- */
.table-responsive {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--cabinet-border);
}

.data-table th {
    color: var(--cabinet-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.data-table tbody tr:hover {
    background: var(--cabinet-bg-soft);
}

.clickable-row {
    cursor: pointer;
}

.col-actions {
    text-align: right;
    white-space: nowrap;
}

.col-actions a {
    font-size: 0.85rem;
}

/* --- Badges --- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-success {
    background: #e9f6ec;
    color: var(--cabinet-success);
}

.badge-muted {
    background: var(--cabinet-bg-soft);
    color: var(--cabinet-muted);
}

/* Statuts de rendez-vous (memes teintes que le calendrier) */
.badge-status-planifie {
    background: #e3edfb;
    color: #2563a8;
}

.badge-status-confirme {
    background: #e9f6ec;
    color: var(--cabinet-success);
}

.badge-status-termine {
    background: var(--cabinet-bg-soft);
    color: var(--cabinet-muted);
}

.badge-status-annule {
    background: #fdecea;
    color: var(--cabinet-danger);
}

.badge-status-absent {
    background: #fdf3e3;
    color: #8a5809;
}

/* --- Login / Setup --- */
.login-container, .setup-container {
    max-width: 380px;
    margin: 4rem auto;
    background: #fff;
    border: 1px solid var(--cabinet-border);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.login-container h2, .setup-container h2 {
    margin-top: 0;
    color: var(--cabinet-primary-dark);
}

.login-container button, .setup-container button {
    width: 100%;
}

.login-logo {
    display: block;
    max-width: 160px;
    margin: 0 auto 1rem;
    border-radius: 8px;
}

/* --- Icones de champs (SVG inline, sans dependance externe) --- */
.field-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 0.4rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.search-icon-wrap {
    position: relative;
}

.search-icon-wrap .field-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
}

.search-icon-wrap .search-box {
    padding-left: 2.25rem;
}

.field-icon-person {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}

.field-icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E");
}

.field-icon-info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='7.5' x2='12' y2='7.6'/%3E%3C/svg%3E");
}

.field-icon-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 3a2 2 0 0 1-.5 2.1L8 10a16 16 0 0 0 6 6l1.2-1.3a2 2 0 0 1 2.1-.5c1 .3 2 .5 3 .7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

.field-icon-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
}

.field-icon-location {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.field-icon-idcard {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Cline x1='14' y1='9' x2='19' y2='9'/%3E%3Cline x1='14' y1='13' x2='19' y2='13'/%3E%3Cline x1='5' y1='16' x2='11' y2='16'/%3E%3C/svg%3E");
}

.field-icon-alert {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 1 21h22z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12' y2='17.1'/%3E%3C/svg%3E");
}

.field-icon-history {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 15'/%3E%3C/svg%3E");
}

.field-icon-note {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3C/svg%3E");
}

.field-icon-vitals {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3Cpolyline points='4 12 8 12 10 9 13 15 15 12 18 12'/%3E%3C/svg%3E");
}

.field-icon-lock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

.field-icon-shield {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z'/%3E%3C/svg%3E");
}

.field-icon-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

.field-icon-settings {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.6 1z'/%3E%3C/svg%3E");
}

/* --- Calendrier des rendez-vous --- */
.calendar-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.calendar-range-label {
    margin-left: 0.5rem;
    font-weight: 600;
    color: var(--cabinet-primary-dark);
}

.calendar-card {
    overflow-x: auto;
    padding: 1rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(130px, 1fr));
    min-width: 960px;
}

.calendar-time-col, .calendar-day-col {
    border-right: 1px solid var(--cabinet-border);
}

.calendar-day-col:last-child {
    border-right: none;
}

.calendar-day-header {
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cabinet-muted);
    border-bottom: 2px solid var(--cabinet-border);
    text-transform: capitalize;
}

.calendar-day-header.is-today {
    color: var(--cabinet-primary-dark);
    background: var(--cabinet-bg-soft);
}

.calendar-add-btn {
    background: none;
    border: 1px solid var(--cabinet-border);
    border-radius: 4px;
    width: 1.3rem;
    height: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--cabinet-muted);
}

.calendar-add-btn:hover {
    background: var(--cabinet-primary);
    color: #fff;
    border-color: var(--cabinet-primary);
}

.calendar-time-label {
    font-size: 0.72rem;
    color: var(--cabinet-muted);
    text-align: right;
    padding-right: 0.4rem;
    transform: translateY(-0.5em);
}

.calendar-day-body {
    position: relative;
}

.calendar-slot-line {
    border-bottom: 1px solid var(--cabinet-border);
    box-sizing: border-box;
    cursor: pointer;
}

.calendar-slot-line:hover {
    background: var(--cabinet-bg-soft);
}

.calendar-rdv-block {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 4px;
    padding: 0.15rem 0.35rem;
    font-size: 0.72rem;
    line-height: 1.2;
    overflow: hidden;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.calendar-rdv-motif {
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-rdv-block.status-planifie {
    background: #e3edfb;
    border-left-color: #2563a8;
    color: #17416f;
}

.calendar-rdv-block.status-confirme {
    background: #e9f6ec;
    border-left-color: var(--cabinet-success);
    color: var(--cabinet-success);
}

.calendar-rdv-block.status-termine {
    background: var(--cabinet-bg-soft);
    border-left-color: var(--cabinet-muted);
    color: var(--cabinet-muted);
}

.calendar-rdv-block.status-annule {
    background: #fdecea;
    border-left-color: var(--cabinet-danger);
    color: var(--cabinet-danger);
    text-decoration: line-through;
}

.calendar-rdv-block.status-absent {
    background: #fdf3e3;
    border-left-color: #b5730f;
    color: #8a5809;
}

/* --- Selecteur de patient (recherche + resultats) --- */
.patient-picker-selected {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.patient-picker-results {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    border: 1px solid var(--cabinet-border);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.patient-picker-results li {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--cabinet-border);
}

.patient-picker-results li:last-child {
    border-bottom: none;
}

.patient-picker-results li:hover {
    background: var(--cabinet-bg-soft);
}