/* Forms.css - Styles de formulaires basés sur le design Figma */

@import url('typography.css');
@import url('colors.css');
.card-form{
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-radius: 20px;
    border: 1px solid var(--Gray-100, #F3F4F6);
}

/* ===== Utilities for prescriber visibility and autocomplete layering ===== */
#prescriber_container.hidden-block, #prescriber_formset.hidden-block { display: none; }
#prescriber_container.is-visible, #prescriber_formset.is-visible { display: block; }
.ui-autocomplete { z-index: 2000 !important; }
.card-title-form{
    color: Gray/950, #030712;
    /* Text md/Semibold */
    font-family: var(--Typeface-Family-Text, Inter);
    font-size: var(--Typeface-Size-md, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
}

.card-body-form{
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    gap: 24px;
    align-self: stretch;
}

/* Container principal */
.demand-form-container {
    background: white;
    border-radius: 20px;
    width: 100%;
    margin: 0 auto;
}

/* Header bar - Complete Figma layout */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding: 20px 0;
    background: white;
    border-radius: 20px;
    width: 100%;
}

.title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.icon-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: #FEF3C7;
    border-radius: 100px;
    flex-shrink: 0;
}

.icon-circle img {
    width: 24px;
    height: 24px;
}

.page-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    color: #111827;
    margin: 0;
    flex-shrink: 0;
}

/* Actions - Exact Figma specifications */
.actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

/* Champ date - Exact Figma specifications */
.date-field {
    position: relative;
    height: 52px;
    background: white;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    overflow: hidden;
    flex-shrink: 0;
}

.date-field input {
    width: 100%;
    height: 100%;
    padding: 16px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #111827;
    box-sizing: border-box;
    outline: none;
}

.date-field input::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

/* Date field content wrapper - matches Figma structure */
.date-field-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 8px;
    box-sizing: border-box;
}

.date-field-content .form-control {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0;
    height: auto;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #111827;
    outline: none;
}

/* Custom calendar icon for webkit browsers (Chrome, Safari, Edge) */
.form-control[type="date"]::-webkit-calendar-picker-indicator, .form-control[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath opacity='0.4' d='M20.5 9.5V18C20.5 18.9229 20.2696 19.5233 19.8965 19.8965C19.5233 20.2696 18.9229 20.5 18 20.5H6C5.07707 20.5 4.47668 20.2696 4.10352 19.8965C3.73036 19.5233 3.5 18.9229 3.5 18V9.5H20.5Z' fill='%2300275C' stroke='%2300275C'/%3E%3Cpath d='M18 4.5H16.75V3C16.75 2.586 16.414 2.25 16 2.25C15.586 2.25 15.25 2.586 15.25 3V4.5H8.75V3C8.75 2.586 8.414 2.25 8 2.25C7.586 2.25 7.25 2.586 7.25 3V4.5H6C4 4.5 3 5.5 3 7.5V9H21V7.5C21 5.5 20 4.5 18 4.5Z' fill='%2300275C'/%3E%3Cpath d='M8.02002 14C7.46802 14 7.01489 13.552 7.01489 13C7.01489 12.448 7.45801 12 8.01001 12H8.02002C8.57302 12 9.02002 12.448 9.02002 13C9.02002 13.552 8.57202 14 8.02002 14ZM13.02 13C13.02 12.448 12.573 12 12.02 12H12.01C11.458 12 11.0149 12.448 11.0149 13C11.0149 13.552 11.468 14 12.02 14C12.572 14 13.02 13.552 13.02 13ZM17.02 13C17.02 12.448 16.573 12 16.02 12H16.01C15.458 12 15.0149 12.448 15.0149 13C15.0149 13.552 15.468 14 16.02 14C16.572 14 17.02 13.552 17.02 13ZM9.02002 17C9.02002 16.448 8.57302 16 8.02002 16H8.01001C7.45801 16 7.01489 16.448 7.01489 17C7.01489 17.552 7.46802 18 8.02002 18C8.57202 18 9.02002 17.552 9.02002 17ZM13.02 17C13.02 16.448 12.573 16 12.02 16H12.01C11.458 16 11.0149 16.448 11.0149 17C11.0149 17.552 11.468 18 12.02 18C12.572 18 13.02 17.552 13.02 17ZM17.02 17C17.02 16.448 16.573 16 16.02 16H16.01C15.458 16 15.0149 16.448 15.0149 17C15.0149 17.552 15.468 18 16.02 18C16.572 18 17.02 17.552 17.02 17Z' fill='%2300275C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    cursor: pointer;
    height: 24px;
    width: 24px;
    margin-left: 0;
    margin-right: 0;
    opacity: 1;
    -webkit-appearance: none;
    appearance: none;
}

/* Hover effect for webkit calendar icon */
.form-control[type="date"]::-webkit-calendar-picker-indicator:hover, .form-control[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.8;
}


.form-control[type="date"]::-moz-calendar-picker-indicator, .form-control[type="datetime-local"]::-moz-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath opacity='0.4' d='M20.5 9.5V18C20.5 18.9229 20.2696 19.5233 19.8965 19.8965C19.5233 20.2696 18.9229 20.5 18 20.5H6C5.07707 20.5 4.47668 20.2696 4.10352 19.8965C3.73036 19.5233 3.5 18.9229 3.5 18V9.5H20.5Z' fill='%2300275C' stroke='%2300275C'/%3E%3Cpath d='M18 4.5H16.75V3C16.75 2.586 16.414 2.25 16 2.25C15.586 2.25 15.25 2.586 15.25 3V4.5H8.75V3C8.75 2.586 8.414 2.25 8 2.25C7.586 2.25 7.25 2.586 7.25 3V4.5H6C4 4.5 3 5.5 3 7.5V9H21V7.5C21 5.5 20 4.5 18 4.5Z' fill='%2300275C'/%3E%3Cpath d='M8.02002 14C7.46802 14 7.01489 13.552 7.01489 13C7.01489 12.448 7.45801 12 8.01001 12H8.02002C8.57302 12 9.02002 12.448 9.02002 13C9.02002 13.552 8.57202 14 8.02002 14ZM13.02 13C13.02 12.448 12.573 12 12.02 12H12.01C11.458 12 11.0149 12.448 11.0149 13C11.0149 13.552 11.468 14 12.02 14C12.572 14 13.02 13.552 13.02 13ZM17.02 13C17.02 12.448 16.573 12 16.02 12H16.01C15.458 12 15.0149 12.448 15.0149 13C15.0149 13.552 15.468 14 16.02 14C16.572 14 17.02 13.552 17.02 13ZM9.02002 17C9.02002 16.448 8.57302 16 8.02002 16H8.01001C7.45801 16 7.01489 16.448 7.01489 17C7.01489 17.552 7.46802 18 8.02002 18C8.57202 18 9.02002 17.552 9.02002 17ZM13.02 17C13.02 16.448 12.573 16 12.02 16H12.01C11.458 16 11.0149 16.448 11.0149 17C11.0149 17.552 11.468 18 12.02 18C12.572 18 13.02 17.552 13.02 17ZM17.02 17C17.02 16.448 16.573 16 16.02 16H16.01C15.458 16 15.0149 16.448 15.0149 17C15.0149 17.552 15.468 18 16.02 18C16.572 18 17.02 17.552 17.02 17Z' fill='%2300275C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    cursor: pointer;
    height: 24px;
    width: 24px;
    margin-left: 0;
    margin-right: 0;
}

/* Additional browser-specific hiding */
.form-control[type="date"]::-ms-clear,
.form-control[type="datetime-local"]::-ms-clear {
    display: none !important;
}

.form-control[type="date"]::-ms-reveal,
.form-control[type="datetime-local"]::-ms-reveal {
    display: none !important;
}


/* Bouton save - Exact Figma specifications */
.icon-circle-save {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    /* background: #00275C; */
    border-radius: 100px;
    /* border: none; */
    cursor: pointer;
    transition: opacity 0.2s ease;
    padding: 16px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.icon-circle-save:hover {
    opacity: 0.9;
}

.icon-circle-save:active {
    opacity: 0.8;
}

.icon-circle-save:focus {
    outline: none;
}

.icon-circle-save img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* Form container - Exact Figma specifications */
.form-container {
    display: flex;
    gap: 24px;
    width: 100%;
    background: white;
    border-radius: 20px;
    align-items: flex-start;
    justify-content: space-between;
}

.form-column-left,
.form-column-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc(50% - 12px);
    max-width: calc(50% - 12px);
}

/* Form blocks - Exact Figma specifications */
.form-block {
    background: white;
    /* border: 1px solid #F3F4F6; */
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.form-block .card-header, .card-header {
    background: #F9FAFB;
    padding: 16px 20px;
    border-bottom: 1px solid #F3F4F6;
    border-radius: 12px 12px 0 0;
    height: auto;
    display: flex;
    align-items: center;
    min-height: 72px;
}

.form-block .card-title {
    font-family: var(--font-family-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-gray-950);
    margin: 0;
    width: 150px;
    flex-shrink: 0;
}

.form-block .card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Form group - Updated to work with existing Bootstrap structure */
.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    position: relative;
    margin-bottom: 16px;
}

/* Input wrapper - Enhanced for existing structure */
.input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Input field container - Exact Figma specifications */
.input-field-container {
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    justify-items: start;
    position: relative;
    flex-shrink: 0;
}

/* Input field - Exact Figma specifications */
.input-field {
    background: var(--color-background-white);
    height: 52px;
    margin-top: 7px;
    border-radius: 12px;
    width: 340px;
    position: relative;
    border: 1px solid var(--color-border-light);
    transition: all 0.2s ease;
}

/* Input field content - Exact Figma specifications */
.input-field-content {
    display: flex;
    gap: 8px;
    height: 52px;
    align-items: center;
    padding: 16px;
    position: relative;
    border-radius: inherit;
    width: 340px;
    box-sizing: border-box;
}

/* Input field border overlay - Exact Figma specifications */
.input-field-border {
    position: absolute;
    border: 1px solid var(--color-border-light);
    inset: -1px;
    pointer-events: none;
    border-radius: 13px;
    transition: border-color 0.2s ease;
}

/* Input field states - Exact Figma specifications */

/* Default State */
.input-field.default {
    background: var(--color-background-white);
    border-color: var(--color-border-light);
}

.input-field.default .input-field-border {
    border-color: var(--color-border-light);
}

.input-field.default .input-text {
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Filled State */
.input-field.filled {
    background: var(--color-background-white);
    border-color: var(--color-border-light);
}

.input-field.filled .input-field-border {
    border-color: var(--color-border-light);
}

.input-field.filled .input-text {
    color: var(--color-text-primary);
    font-size: 16px;
}

/* Focus State */
.input-field.focus {
    background: var(--color-background-white);
    border-color: var(--color-primary);
}

.input-field.focus .input-field-border {
    border-color: var(--color-primary);
}

.input-field.focus .input-text {
    color: var(--color-text-primary);
    font-size: 16px;
}

/* Disabled State */
.input-field.disabled {
    background: var(--color-background-light);
    border-color: var(--color-border-light);
}

.input-field.disabled .input-field-border {
    border-color: var(--color-border-light);
}

.input-field.disabled .input-text {
    color: var(--color-text-muted);
    font-size: 16px;
}

/* Error State */
.input-field.error {
    background: var(--color-background-white);
    border-color: var(--color-error);
}

.input-field.error .input-field-border {
    border-color: var(--color-error);
}

.input-field.error .input-text {
    color: var(--color-text-primary);
    font-size: 16px;
}

/* Input text - Exact Figma specifications */
.input-text {
    flex: 1 0 0;
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    min-height: 1px;
    min-width: 1px;
    position: relative;
    flex-shrink: 0;
    white-space: pre-wrap;
    margin: 0;
    padding: 0;
}

/* Input icons - Exact Figma specifications */
.input-icon {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-icon svg {
    width: 24px;
    height: 24px;
}

.input-icon-left {
    margin-right: 8px;
}

.input-icon-right {
    margin-left: 8px;
}

/* Labels - Exact Figma specifications from node 54-739 */
.form-label {
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 1.5;
    color: #00275c;
    background: var(--color-background-white);
    padding: 0 4px;
    margin: 0 16px;
    position: absolute;
    z-index: 1;
    display: block;
    top: -14px;
}

/* Alternative label positioning for existing structure - Enhanced */
.input-wrapper label {
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 1.5;
    color: #00275c;
    background: #ffffff;
    padding: 0 4px;
    margin: 0 16px;
    position: absolute;
    z-index: 1;
    display: block;
    top: -14px;
}


/* Date input specific styling - applies to all date inputs */
.form-control[type="date"],
.form-control[type="datetime-local"] {
    padding-right: 16px; /* Reduced padding since we use native icon */
    position: relative;
    cursor: pointer;
}


/* Date input container styling */
.form-group:has(.form-control[type="date"]),
.form-group:has(.form-control[type="datetime-local"]) {
    position: relative;
}

/* Custom calendar icon for native date input */
.form-control[type="date"],
.form-control[type="datetime-local"] {
    padding-right: 16px;
    position: relative;
    cursor: pointer;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath opacity='0.4' d='M20.5 9.5V18C20.5 18.9229 20.2696 19.5233 19.8965 19.8965C19.5233 20.2696 18.9229 20.5 18 20.5H6C5.07707 20.5 4.47668 20.2696 4.10352 19.8965C3.73036 19.5233 3.5 18.9229 3.5 18V9.5H20.5Z' fill='%2300275C' stroke='%2300275C'/%3E%3Cpath d='M18 4.5H16.75V3C16.75 2.586 16.414 2.25 16 2.25C15.586 2.25 15.25 2.586 15.25 3V4.5H8.75V3C8.75 2.586 8.414 2.25 8 2.25C7.586 2.25 7.25 2.586 7.25 3V4.5H6C4 4.5 3 5.5 3 7.5V9H21V7.5C21 5.5 20 4.5 18 4.5Z' fill='%2300275C'/%3E%3Cpath d='M8.02002 14C7.46802 14 7.01489 13.552 7.01489 13C7.01489 12.448 7.45801 12 8.01001 12H8.02002C8.57302 12 9.02002 12.448 9.02002 13C9.02002 13.552 8.57202 14 8.02002 14ZM13.02 13C13.02 12.448 12.573 12 12.02 12H12.01C11.458 12 11.0149 12.448 11.0149 13C11.0149 13.552 11.468 14 12.02 14C12.572 14 13.02 13.552 13.02 13ZM17.02 13C17.02 12.448 16.573 12 16.02 12H16.01C15.458 12 15.0149 12.448 15.0149 13C15.0149 13.552 15.468 14 16.02 14C16.572 14 17.02 13.552 17.02 13ZM9.02002 17C9.02002 16.448 8.57302 16 8.02002 16H8.01001C7.45801 16 7.01489 16.448 7.01489 17C7.01489 17.552 7.46802 18 8.02002 18C8.57202 18 9.02002 17.552 9.02002 17ZM13.02 17C13.02 16.448 12.573 16 12.02 16H12.01C11.458 16 11.0149 16.448 11.0149 17C11.0149 17.552 11.468 18 12.02 18C12.572 18 13.02 17.552 13.02 17ZM17.02 17C17.02 16.448 16.573 16 16.02 16H16.01C15.458 16 15.0149 16.448 15.0149 17C15.0149 17.552 15.468 18 16.02 18C16.572 18 17.02 17.552 17.02 17Z' fill='%2300275C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    cursor: pointer;
    height: 24px;
    width: 24px;
    margin-left: 0;
    margin-right: 0;
    opacity: 1;
}

/* Hover effect */
.form-control[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.8;
}

/* Firefox support */
.form-control[type="date"]::-moz-calendar-picker-indicator,
.form-control[type="datetime-local"]::-moz-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath opacity='0.4' d='M20.5 9.5V18C20.5 18.9229 20.2696 19.5233 19.8965 19.8965C19.5233 20.2696 18.9229 20.5 18 20.5H6C5.07707 20.5 4.47668 20.2696 4.10352 19.8965C3.73036 19.5233 3.5 18.9229 3.5 18V9.5H20.5Z' fill='%2300275C' stroke='%2300275C'/%3E%3Cpath d='M18 4.5H16.75V3C16.75 2.586 16.414 2.25 16 2.25C15.586 2.25 15.25 2.586 15.25 3V4.5H8.75V3C8.75 2.586 8.414 2.25 8 2.25C7.586 2.25 7.25 2.586 7.25 3V4.5H6C4 4.5 3 5.5 3 7.5V9H21V7.5C21 5.5 20 4.5 18 4.5Z' fill='%2300275C'/%3E%3Cpath d='M8.02002 14C7.46802 14 7.01489 13.552 7.01489 13C7.01489 12.448 7.45801 12 8.01001 12H8.02002C8.57302 12 9.02002 12.448 9.02002 13C9.02002 13.552 8.57202 14 8.02002 14ZM13.02 13C13.02 12.448 12.573 12 12.02 12H12.01C11.458 12 11.0149 12.448 11.0149 13C11.0149 13.552 11.468 14 12.02 14C12.572 14 13.02 13.552 13.02 13ZM17.02 13C17.02 12.448 16.573 12 16.02 12H16.01C15.458 12 15.0149 12.448 15.0149 13C15.0149 13.552 15.468 14 16.02 14C16.572 14 17.02 13.552 17.02 13ZM9.02002 17C9.02002 16.448 8.57302 16 8.02002 16H8.01001C7.45801 16 7.01489 16.448 7.01489 17C7.01489 17.552 7.46802 18 8.02002 18C8.57202 18 9.02002 17.552 9.02002 17ZM13.02 17C13.02 16.448 12.573 16 12.02 16H12.01C11.458 16 11.0149 16.448 11.0149 17C11.0149 17.552 11.468 18 12.02 18C12.572 18 13.02 17.552 13.02 17ZM17.02 17C17.02 16.448 16.573 16 16.02 16H16.01C15.458 16 15.0149 16.448 15.0149 17C15.0149 17.552 15.468 18 16.02 18C16.572 18 17.02 17.552 17.02 17Z' fill='%2300275C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    cursor: pointer;
    height: 24px;
    width: 24px;
    margin-left: 0;
    margin-right: 0;
}

/* Edge support */
.form-control[type="date"]::-ms-calendar-picker-indicator,
.form-control[type="datetime-local"]::-ms-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath opacity='0.4' d='M20.5 9.5V18C20.5 18.9229 20.2696 19.5233 19.8965 19.8965C19.5233 20.2696 18.9229 20.5 18 20.5H6C5.07707 20.5 4.47668 20.2696 4.10352 19.8965C3.73036 19.5233 3.5 18.9229 3.5 18V9.5H20.5Z' fill='%2300275C' stroke='%2300275C'/%3E%3Cpath d='M18 4.5H16.75V3C16.75 2.586 16.414 2.25 16 2.25C15.586 2.25 15.25 2.586 15.25 3V4.5H8.75V3C8.75 2.586 8.414 2.25 8 2.25C7.586 2.25 7.25 2.586 7.25 3V4.5H6C4 4.5 3 5.5 3 7.5V9H21V7.5C21 5.5 20 4.5 18 4.5Z' fill='%2300275C'/%3E%3Cpath d='M8.02002 14C7.46802 14 7.01489 13.552 7.01489 13C7.01489 12.448 7.45801 12 8.01001 12H8.02002C8.57302 12 9.02002 12.448 9.02002 13C9.02002 13.552 8.57202 14 8.02002 14ZM13.02 13C13.02 12.448 12.573 12 12.02 12H12.01C11.458 12 11.0149 12.448 11.0149 13C11.0149 13.552 11.468 14 12.02 14C12.572 14 13.02 13.552 13.02 13ZM17.02 13C17.02 12.448 16.573 12 16.02 12H16.01C15.458 12 15.0149 12.448 15.0149 13C15.0149 13.552 15.468 14 16.02 14C16.572 14 17.02 13.552 17.02 13ZM9.02002 17C9.02002 16.448 8.57302 16 8.02002 16H8.01001C7.45801 16 7.01489 16.448 7.01489 17C7.01489 17.552 7.46802 18 8.02002 18C8.57202 18 9.02002 17.552 9.02002 17ZM13.02 17C13.02 16.448 12.573 16 12.02 16H12.01C11.458 16 11.0149 16.448 11.0149 17C11.0149 17.552 11.468 18 12.02 18C12.572 18 13.02 17.552 13.02 17ZM17.02 17C17.02 16.448 16.573 16 16.02 16H16.01C15.458 16 15.0149 16.448 15.0149 17C15.0149 17.552 15.468 18 16.02 18C16.572 18 17.02 17.552 17.02 17Z' fill='%2300275C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    cursor: pointer;
    height: 24px;
    width: 24px;
}

/* Ensure date input labels work with new positioning */
.form-group:has(.form-control[type="date"]) label,
.form-group:has(.form-control[type="datetime-local"]) label {
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 1.5;
    color: #00275c;
    background: #ffffff;
    padding: 0 4px;
    margin: 0 16px;
    position: absolute;
    z-index: 1;
    display: block;
    top: -14px;
}

/* Hint text - Exact Figma specifications */
.form-hint {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-regular);
    justify-content: center;
    min-width: 100%;
    position: relative;
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-muted);
    width: min-content;
}

.form-hint.error {
    color: var(--color-error);
}


/* Form controls - Updated to work with existing HTML structure */
.form-control {
    background: var(--color-background-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    height: 52px;
    padding: 16px;
    font-family: var(--font-family-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    width: 100%;
    position: relative;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
    border-radius: 12px;
}


/* État Focus */
.form-control:focus {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 39, 92, 0.1);
}

/* État Disabled */
.form-control:disabled {
    background: var(--color-background-light);
    border-color: var(--color-border-light);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* État Hover */
.form-control:hover:not(:disabled):not(:focus) {
    border-color: var(--color-primary);
}

.form-control::placeholder {
    color: var(--color-gray-400);
    font-family: var(--font-family-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: 150%; /* 21px */
}

/* Input avec icônes */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-icon-left {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 10;
}

.input-icon-right {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: auto; 
    z-index: 10; 
}


.input-with-icon .form-control {
    padding-left: 48px; /* 16px + 24px + 8px */
}

.input-with-icon.input-icon-right .form-control {
    padding-right: 48px;
}

.input-with-icon.input-icon-both .form-control {
    padding-left: 48px;
    padding-right: 48px;
}

/* Labels - Exact Figma specifications */
.form-label {
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-primary);
    background: var(--color-background-white);
    padding: 0 4px;
    margin-left: 16px;
    margin-top: 7px;
    position: absolute;
    z-index: 1;
    display: block;
}

/* Textarea - Styles selon design Figma */
.textarea-control {
    background: var(--color-background-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    min-height: 180px;
    padding: 16px;
    font-family: var(--font-family-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    width: 354px;
    resize: vertical;
}

/* États textarea */
.textarea-control:not(:focus):not(:disabled):not(.is-invalid) {
    border-color: var(--color-border-light);
    color: var(--color-text-muted);
}

.textarea-control:focus {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    outline: none;
    box-shadow: none;
}

.textarea-control:disabled {
    background: var(--color-background-light);
    border-color: var(--color-border-light);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.textarea-control.is-invalid {
    border-color: var(--color-red-500);
    color: var(--color-text-primary);
}

.textarea-control::placeholder {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Messages d'aide et d'erreur */
.form-help {
    font-family: var(--font-family-text);
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-muted);
    margin-top: 4px;
}

.form-error {
    font-family: var(--font-family-text);
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-red-500);
    margin-top: 4px;
}

/* Input groups avec labels flottants */
/* .input-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
} */

.input-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Search bars - Styles selon design Figma */
.search-bar {
    background: var(--color-background-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    height: 52px;
    width: 354px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-muted);
    cursor: pointer;
    position: relative;
}

/* État Default */
.search-bar:not(:focus):not(.active):not(.filled) {
    border-color: var(--color-border-light);
    color: var(--color-text-muted);
}

/* État Focus */
.search-bar:focus {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    outline: none;
}

/* État Active */
.search-bar.active {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
}

/* État Filled */
.search-bar.filled {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
}

.search-bar:hover {
    border-color: var(--color-primary);
}

/* Icône de recherche */
.search-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Bouton de suppression */
.search-clear {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    display: none;
}

.search-bar.filled .search-clear {
    display: block;
}

/* Curseur de saisie */
.search-cursor {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* Action buttons */
.btn-action {
    background: var(--color-background-white);
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px;
}

.btn-action:hover {
    background: var(--color-primary);
    color: var(--color-background-white);
}

/* Checkboxes - Style Figma */
.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox {
    width: 20px;
    height: 20px;
    background: var(--color-background-white);
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

.checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.checkbox input[type="checkbox"]:checked + .checkmark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-background-white);
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox input[type="checkbox"]:checked + .checkmark:after {
    display: block;
}

.checkbox-label {
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-dark);
    cursor: pointer;
}

/* Communication preferences */
.communication-preferences {
    display: flex;
    align-items: center;
    gap: 16px;
}

.communication-label {
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
}

.communication-button {
    background: var(--color-background-light);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}



/* Separator lines */
.separator-line {
    height: 1px;
    background: var(--color-border-subtle);
    width: 100%;
    margin: 16px 0;
}

/* Additional input type styling */
.form-control[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* File input styling */
.form-control[type="file"] {
    padding: 8px 16px;
    cursor: pointer;
}

/* Range input styling */
.form-control[type="range"] {
    height: 6px;
    padding: 0;
    background: var(--color-border-light);
    border: none;
    border-radius: 3px;
}

.form-control[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
}

.form-control[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Checkbox and radio styling */
.form-control[type="checkbox"],
.form-control[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

/* Search input styling */
.form-control[type="search"] {
    padding-left: 48px; /* Make room for search icon */
}

/* Password input styling */
.form-control[type="password"] {
    font-family: monospace;
    letter-spacing: 0.1em;
}

/* Email input styling */
.form-control[type="email"]:invalid:not(:focus):not(:placeholder-shown) {
    border-color: var(--color-error);
}

/* URL input styling */
.form-control[type="url"]:invalid:not(:focus):not(:placeholder-shown) {
    border-color: var(--color-error);
}

/* Tel input styling */
.form-control[type="tel"] {
    font-family: monospace;
}

/* Time input styling */
.form-control[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.form-control[type="time"]::-moz-calendar-picker-indicator {
    display: none;
}

/* Datetime-local input styling - removed conflicting rules, now uses same styles as date */

/* JavaScript state management classes */
.input-field.has-value .input-text {
    color: var(--color-text-primary);
    font-size: 16px;
}

.input-field.has-focus .input-field-border {
    border-color: var(--color-primary);
}

.input-field.has-error .input-field-border {
    border-color: var(--color-error);
}

.input-field.is-disabled {
    background: var(--color-background-light);
    pointer-events: none;
}

.input-field.is-disabled .input-text {
    color: var(--color-text-muted);
}

/* Form control states for existing structure */
.form-control.has-focus {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    box-shadow: 0 0 0 2px rgba(0, 39, 92, 0.1);
}

.form-control.has-value {
    color: var(--color-text-primary);
}

.form-control.has-error {
    border-color: var(--color-error);
}

.form-control.is-disabled {
    background: var(--color-background-light);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* Placeholder styling for existing structure */


/* Focus cursor styling */
.input-field.focus .input-text::after {
    content: '|';
    color: var(--color-primary);
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Label container - Exact Figma specifications */
.label-container {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 16px;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    z-index: 1;
}

.label-container .label-text {
    background: var(--color-background-white);
    padding: 0 4px;
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 1.5;
    color: #00275c;
    display: inline-block;
}

/* Enhanced date input styling for all date inputs */
.form-control[type="date"],
.form-control[type="datetime-local"] {
    color-scheme: light;
    cursor: pointer;
}

.form-control[type="date"]:focus,
.form-control[type="datetime-local"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 39, 92, 0.1);
}

/* Ensure date input form groups work properly */
.form-group:has(.form-control[type="date"]),
.form-group:has(.form-control[type="datetime-local"]) {
    margin-bottom: 16px;
}

.form-group:has(.form-control[type="date"]) .form-control,
.form-group:has(.form-control[type="datetime-local"]) .form-control {
    margin-bottom: 0;
}

/* Responsive adjustments for new input structure */
@media (max-width: 768px) {
    .input-field {
        width: 100%;
        max-width: 340px;
    }
    
    .input-field-content {
        width: 100%;
    }
    
    .form-group {
        width: 100%;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .form-container {
        flex-direction: column;
    }
    
    .header-bar {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    
    .actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .input-row {
        flex-direction: column;
        gap: 16px;
    }
    
    .search-bar {
        width: 100%;
    }
    
    .form-control {
        max-width: 100%;
    }
    
    .input-wrapper {
        width: 100%;
    }
    
    .form-label {
        font-size: var(--font-size-sm);
    }
}