/* ============================================================================
   CRM EDITORS — Shared styles for all custom editor components
   theCRMv2.UI/wwwroot/css/crmeditors.css
   ============================================================================ */

/* === Base editor wrapper === */
.crm-editor {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* === Base input === */
.crm-editor-input {
    width: 100%;
    height: 28px;
    padding: 0 32px 0 8px;
    border: 0.571429px solid #ced4da;
    border-radius: 3px;
    font-size: 0.92rem;
    font-family: inherit;
    color: #212529;
    background-color: #fff;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .crm-editor-input:focus {
        outline: none;
        border-color: var(--tc-color-pk);
        box-shadow: 0 0 0 2px rgba(199, 26, 97, 0.15);
    }

/* === Icon inside input === */
.crm-editor-icon {
    position: absolute;
    right: 8px;
    pointer-events: none;
    color: #6c757d;
    font-size: 0.85rem;
}

/* === Readonly state === */
.crm-editor--readonly .crm-editor-input {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    border-color: #e9ecef;
}

.crm-editor--readonly .crm-editor-icon {
    color: #adb5bd;
}

/* ============================================================================
   DATE / DATETIME specific
   ============================================================================ */

.crm-datetime-edit .crm-editor-input,
.crm-date-edit .crm-editor-input {
    padding-right: 32px;
    color-scheme: light;
}

/* Hide the native browser calendar icon — we use FA Pro */
.crm-datetime-edit input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.crm-date-edit input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 32px;
    height: 100%;
    cursor: pointer;
}